How I Created My Own React Spinners Library
I’ve created an application that uses Airtable as a database. I’ve used a spinner to take the place of a dull blank page which would otherwise be presented to the user in the time that it takes for the requested data to arrive and for the page to get rendered accordingly.
I could have used an existing react spinners library, but instead, I decided to use this chance to learn how to build my own spinners and my own React component library. So, in this post, I’ll show you my library, and an example of how to use a spinner.
React Spinners Library
So, without further ado, here’s my react spinners library (GitHub, Bit). It’s based on loading.io CSS loaders. I’ve added the option to send color and size as props of the component so that it’s easier to customize the spinners. I’ve exported the spinners (twelve in total) to bit.dev so you may easily view and tweak them in Bit’s live playground, and install them as packages with NPM or Yarn (or get their source code using Bit import).
For example, this is the circle loader and the component can receive color and size props:
and the code import a very simple CSS code, exactly the same from loading.io CSS loader:
How to use Loader animation in your React.js application?
So, you have a component that sends a request and stores the received data in an array inside your state object. The obvious thing to do is check if the array is empty and if so, display the spinner.
For this example, I used a Facebook spinner with a very simple page that waiting 5 seconds until to show a list of cars.
It’s very simple to use and allows you to show a nice animation loader until the data is loaded.
Also, you can use a custom color in any spinner, just send a color inside the color property, like this:
<Facebook color="red" />
<Facebook color="#cecece" />Or be crazy and use a random color with my random color generator component.
<Facebook color={getRandomColor()} />You can see the result with random color in this live demo facebook react spinner.
If you want to see more react spinners examples, check out my react spinners components collection in bit.dev.
For any issue or missing features, please open an issue on GitHub and I’ll do my best.
And of course, if you like it, star it!
And follow me on Twitter to get features updates.
