Frontend effect: React-spinner.

avatar

I am starting a series on front and back-end structures, tools, and packages. I will be writing about different tools for React JS and Node JS and will include Python and ML later. I am still getting my feet right on that.

At the end of learning programming, we still settle down on using tools and packages that make out work faster. I remember when I was building a full stack blog application for a friend and I was taking a lot of time because I built from the backend to the front and he could not wait and ended up using Wix as the blog. That was the last time I wasted time on jobs. I go for the easiest way possible.

Today, I am writing about the react-spinner.

React-spinner is an npm package that gives a loading effect on your React website. This works well in the situation where you want to show the loading effect before you want your home page to show or you wish to give a loading effect like you are fetching data from the backend. This does the work seamlessly with just a few lines of code.

INSTALLATION

For Yarn

yarn add react-spinners

For Npm

npm install --save react-spinners

You simply need to import the package into the page you wish to use it. In the code below, I used it in app.js

The PropagateLoader is what I decided to use from the package. You could use anyone you like. There are bunch of loaders there. Then I used react useState to set the states and useEffect for the timing. As it is in the code below, the time set is 5 seconds, which is 5000 milliseconds and I used ternary operator to set a block of code for the effect to come up before the Home page.

The Code


const App = ({ type, color }) => {
const [loading, setLoading] = useState(false);


 useEffect(() => {
     setLoading(true)
     setTimeout(() => {
         setLoading(false)
     }, 5000)
 }, [])


return (
   <div className='App'>


   {
           loading ?
               <div className='gpt3__loader'>
                   <PropagateLoader color={'#36d7b7'} loading={loading} size={30} />
               </div>
               :
               <div>
                  <Home/>
               </div>
       }


   </div>
)
}


export default App;

Result.

There are many effects on the package depending on what works for you and you can get them in here. https://www.davidhu.io/react-spinners/ or here https://www.npmjs.com/package/react-spinners

That will be all and thanks for reading.

Michael B, A.K.A Tykee, I am a software developer, writer and blockchain enthusiast. I write about finance, programming, tech and lifestyle. My contents are my opinions



0
0
0.000
6 comments
avatar

Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support. 
 

0
0
0.000
avatar

Thank you. I appreciate.

0
0
0.000
avatar

English brother, it same you are speaking French, anyway good luck with that.

0
0
0.000