Adding spinners using react-spinners-kit package in React JS
Discover how to elevate your React.js applications by seamlessly integrating and customizing dynamic spinners from the react-spinners-kit package. This article offers a concise, step-by-step guide to enhancing user experience through engaging loading indicators in your React projects.
Prerequisites:
Approach:
- Import Dependencies:
- Import stylesheets ('App.css').
- Import
useStatefrom React. - Import spinner components from "react-spinners-kit".
- Manage Component State:
- Use the
useStatehook to manage theloadingstate, initially set totrue.
- Use the
- Render Spinners:
- Create an
Appcomponent. - Render a set of spinners within a container using different components from "react-spinners-kit".
- Customize each spinner with specific props based on the
loadingstate.
- Create an
- Styling and Export:
- Include a paragraph with the class "tag" for text display.
- Export the
Appcomponent as the default export. - Apply appropriate styling using the defined stylesheets.
Steps to Create React Application And Installing Module:
Step 1: Create a React application using the following command.
npx create-react-app spinner-kitStep 2: After creating your project folder i.e. foldername, move to it using the following command.
cd spinner-kitStep 3: After creating the React application, Install the react-spinner-kit package using the following command:
npm i react-spinners-kitProject Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-spinners-kit": "^1.9.1",
"web-vitals": "^2.1.4",
}
Example: Below is the practical implementation of the react-spinners-kit package.
.spinnerContainer {
margin: auto;
width: 50%;
height: 50%;
text-align: center;
position: absolute;
top: 50%;
transform: translate(50%, -50%);
background-color: black;
display: flex;
align-items: center;
flex-direction: row;
border-radius: 10px;
flex-wrap: wrap;
box-shadow: 0px 8px 8px rgba(23, 22, 22, 0.296);
}
.spinner {
margin: 5%;
padding: 20px;
border: 1px solid rgb(55, 53, 53);
}
.tag {
text-align: center;
font-size: 2rem;
color: green;
}
//App.js
import './App.css';
import { useState } from 'react';
import {
PushSpinner, TraceSpinner, RainbowSpinner,
RingSpinner, SwishSpinner, PongSpinner,
MetroSpinner, JellyfishSpinner
}
from "react-spinners-kit";
function App() {
const [loading, setLoading] = useState(true)
return (
<>
<p className='tag'>Spinners using react-spinners-kit</p>
<div className="spinnerContainer">
<div className="spinner">
<PushSpinner size={30} color="#00ff89"
loading={loading} />
</div>
<div className="spinner">
<TraceSpinner size={40} frontColor="green"
backColor="white" loading={loading} />
</div>
<div className="spinner">
<RainbowSpinner size={50} color="purple"
loading={loading} />
</div>
<div className="spinner">
<RingSpinner size={50} color="yellow"
loading={loading} />
</div>
<div className="spinner">
<SwishSpinner size={40} frontColor="blue"
backColor="white" loading={loading} />
</div>
<div className="spinner">
<PongSpinner size={60} color="pink"
loading={loading} />
</div>
<div className="spinner">
<MetroSpinner size={40} color="white"
loading={loading} />
</div>
<div className="spinner">
<JellyfishSpinner size={40} color="grey"
loading={loading} />
</div>
</div>
</>
);
}
export default App;
Step to Run the application: Run the application by using the following command:
npm start Output: By default, the React project will run on port 3000
