Frontend effect: React-spinner.
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
Yay! 🤗
Your content has been boosted with Ecency Points, by @tykee.
Use Ecency daily to boost your growth on platform!
Support Ecency
Vote for new Proposal
Delegate HP and earn more
Okay.
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.
Thank you. I appreciate.
English brother, it same you are speaking French, anyway good luck with that.
lol. thank you