How to use React loader spinner library

React Loader Spinner is a popular library that provides a wide range of customizable spinners for React applications.
It is a great way to indicate to users that your application is loading data or performing an operation that may take some time.

In this article, we will discuss how to use the React Loader Spinner library and show an example of how to use the TailSpin spinner in a React application.

Installing React Loader Spinner
Before we start using React Loader Spinner, we need to install the library in our React application.

To install the library, we can use the npm package manager by running the following command:

npm install react-loader-spinner

Once the library is installed, we can import the react-loader-spinner component and start using it in our React application.

Using the TailSpin Spinner in a React Application
First, we import the TailSpin component from the react-loader-spinner library:

import { TailSpin } from "react-loader-spinner";

Next, we define a state variable called loading and set its initial value to false.
This state variable will be used to determine whether the spinner should be displayed or not:

const [loading, setLoading] = useState(false);

In the useEffect hook, we define an asynchronous function called fetchData that retrieves data from a remote API.
Before the data is fetched, we set the loading state variable to true to indicate that the data is being loaded:

const fetchData = async () => {
  try {
    setLoading(true);
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
    setPosts(data);
  } catch (error) {
    setError(error.message);
  } finally {
    setLoading(false);
  }
};

useEffect(()=>{
  fetchData();
},[]);

Finally, in the JSX code, we conditionally render the TailSpin spinner based on the value of the loading state variable. If loading is true, the spinner is displayed; otherwise, the posts are displayed:

{loading ? (
  <TailSpin color="red" radius={"8px"} />
) : (
  posts.map((post) => (
    <div key={post.id}>
      <h5>{post?.title}</h5>
      <p>{post?.body}</p>
    </div>
  ))
)}

In this example, we set the color and radius props of the TailSpin component to customize the appearance of the spinner.

Here are some other properties that can be set for the spinner component:

1. color: Sets the color of the spinner.
2. height: Sets the height of the spinner.
3. width: Sets the width of the spinner.
4. timeout: Sets the duration of the animation before the spinner stops spinning.
5. visible: Determines whether the spinner should be visible or not.
6. secondaryColor: Sets the secondary color of the spinner for multi-color spinners.
7. radius: Sets the border radius of the spinner.
8. strokeWidth: Sets the stroke width of the spinner.
9. style: An object that contains additional styles to apply to the spinner.
10. className: A string that contains additional CSS classes to apply to the spinner.

Conclusion
React Loader Spinner is a powerful library that provides a wide range of customizable spinners for React applications.
By using the TailSpin spinner, we can indicate to users that our application is loading data or performing an operation that may take some time.
By installing the library, importing the component, and using it in our JSX code, we can easily integrate React Loader Spinner into our React application.

Comments

[Augustine Edeh]

Found this super helpful. Thanks, Martin!

[Martin Wachira]

Welcome, glad it helped you.

[Garima]

Thing is, I need to apply the loader for the whole website, so there is not just one api call. I need to it for each and every page, how do i do that?