React Loader

What is React Loader?

In any application, there are many instances where a page becomes idle to load the data which is to be shown on the same page only. In such instances, we are required to let the user know that the page is loading some data which is to be shown on this page.

In most cases, this loading of data takes place when we send a request to our database where the data that is to be loaded is stored. To show the user that the page is loading some data, we use a page loader.

In React Js, we have an npm package called react loader which allows us to implement a loader in a React application. When data is loading, (For example waiting for an asynchronous request to load data for a view), react-loader gives your React.js component a quick way to create a loading spinner. This loader spinner has been implemented using the spin.js library.

You can also refer to the official documentation of react loader for more details react-loader npm.

Installation of React Loader

Let us start by creating a React application in which, we will implement the react loader.

1. Creating React Application:
   Go to a folder where you want to create the React Js application. Open the folder inside a code editor and the terminal, and write the following command to create react application with the name reactapplication.

2. Running out React Js application:
   To run the React application created in the previous step, open the terminal inside the newly create reactapplication folder and write npm start. This will run the React application in local host 3000.

   App.js:

   This is what our app looks like.

3. Installing React Loader (npm or browse):
   In the terminal, open the newly created react application folder and write the following command to install the react loader package in our React application.

   React loader can also be installed by using the browse option. Writing bower install react-loader inside the terminal will also install the react loader package in our React application.

Usage of React Loader

React loader can be used by simply importing the Loader component from the react loader library by using var Loader = require('react-loader');. The Loader component has a prop with the name loaded which defines whether the loader is to be shown or not. Setting the loaded prop to false will show the loader on the screen while setting the loaded prop to true will show the original content of the page.

Given below is the code to implement react loader in our React application.

Case - 1: Setting Loaded Prop to be False

App.js:

This is what our App.js page looks like.

Case - 2: Setting Loaded Prop to be True

App.js:

This is what our App.js page looks like.

Options in React Loader

React loader provides us with many options that can be used to modify the state, appearance, and positioning of the React loader spinner. Some of the options are given below.

1. Loaded

This option is used to define whether the loader should be visible or not. It takes a boolean value i.e. it takes either a true value or a false value. Setting loaded to false will make the loader visible. While setting loaded to true will hide the loader.

Case - 1: Setting loaded prop to be false

App.js:

This is what our App.js page looks like.

Case - 2: Setting loaded prop to be true

App.js:

This is what our App.js page looks like.

2. Shadow

This option also takes a boolean value and defines whether the React loader spinner has a shadow or not.

Case - 1: Setting shadow option to true

App.js:

This is what our loader spinner looks like on the App.js page.

Case - 2: Setting shadow option to false

App.js:

This is what our loader spinner looks like on the App.js page.

3. Lines

This defines the number of lines that are used to create the loader spinner. It takes an integer value.

Case - 1: Setting lines option to 5

App.js:

This is what our react loader spinner looks like on the App.js page.

Case - 2: Setting lines option to 20

App.js:

This is what our react loader spinner looks like on the App.js page.

You can read about other options in the official documentation react-loader npm.

Styling in React Loader

By default, react loader is rendered inside a div with a classname as loader. So, we can access the loader class from the App.css file to modify the CSS properties of the react loader spinner.

App.js:

App.css:

This is what our react loader looks like on the App.js page. We can see that the react loader is moved to the bottom left of the App.js page.

Using React Loader Spinner to Load Animations

One of the drawbacks of using react loader library is that it does not provide us with many animation features to animate a loader. There is a separate library called react-loader-spinner (react-loader-spinner NPM) where we get various features to modify the loader spinner.

Using react-loader-spinner, we can also have different types of spinners apart from the regular circular rotating loader.

For more information, you can also check out the official documentation of the react-loader-spinner library Official Documentation react-loader-spinner.

Syntax

To install react-loader-spinner in the React application, write npm i react-loader-spinner in the terminal. After a successful installation, we can simply import the react-loader-spinner in our react application. Given below is the syntax to import and use the circular spinner.

App.js:

This is what our React page looks like.

Types

Many types of loaders are available in the react-loader-spinner library. Some of them are given below.

1. Circles:

App.js:

This is what our React page looks like.

2. Audio:

App.js:

This is what our React page looks like.

3. Bars:

App.js:

This is what our React page looks like.

For all the other types of loaders in the react-loader-spinner library, you can check out the official documentation Official Documentation Loader Components react-loader-spinner.

Prop Types

Prop types are used to modify the state, appearance, and positioning of the React loader spinner. There are several prop types in the react-loader-spinner library which are given below.

• visible:
  It is a boolean value that specifies whether or not the spinner should be visible. The default value is false..
• type:
  This react-loader-spinner prop defines the type of the spinner. For example Circles, Audio, Bars, etc.
• height:
  This react-loader-spinner prop defines the height of the spinner and the default value is 80.
• width:
  This react-loader-spinner prop defines the width of the spinner and the default value is 80.
• color:
  This react-loader-spinner prop defines the color of the spinner.
• secondaryColor:
  This react-loader-spinner prop is available on the plane and mutatingDots loaders.
• timeout:
  This defines the effective periodic time of the spinner.
• radius:
  This react-loader-spinner prop defines the radius of the spinner.

Creating React App

1. Creating React Application:
   Go to a folder where you want to create the React Js application. Open the folder inside a code editor and the terminal, and write the following command to create react application with the name reactapplication.

2. Running out React Js application:
   To run the React application created in the previous step, open the terminal inside the newly create reactapplication folder and write npm start. This will run the React application in local host 3000.

   App.js:

   This is what our app looks like.

3. Installing react-loader-spinner Library and Using Loader in our React Application:
   To install react-loader-spinner in the React application, write npm i react-loader-spinner in the terminal. After a successful installation, we can simply import the react-loader-spinner in our react application. Given below is the syntax to import and use the circular spinner.

   App.js:

   This is what our React page looks like.