ReactJS Reactstrap Spinners Component
Last Updated :
25 Jul, 2024
Reactstrap is a popular front-end library that is easy to use React Bootstrap 4 components. This library contains the stateless React components for Bootstrap 4. The Spinner component allows the user to show the loading effect. It is used for the purpose of indicating a loading state. We can use the following approach in ReactJS to use the ReactJS Reactstrap Spinner Component.
Spinner Props:
- bsPrefix: This prop is used to denote the change in component in css.It is used to customize the bootstrap css .The default value is spinner and type is string .
- size: The size of props is used to demonstrate the size of the spinner .The size of props is used in component size variations . The type of size is sm.
- color: The color props is used to denote the color of the spinner.
- className: The className props is used to denote the class name for styling the component in css .
- children: It is used to pass the children element to this component in React JS .The type of children is element .
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, install the required module using the following command:
npm install reactstrap bootstrap
Project Structure: It will look like the following.
Project StructureExample 1: Now write down the following code in the App.js file. Here, we have shown a spinner with grow type.
App.js
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Spinner } from "reactstrap"
function App() {
return (
<div style={{
display: 'block', width: 700, padding: 30
}}>
<h4>ReactJS Reactstrap Simple Spinner Component</h4>
<Spinner type="grow" color="warning"
children={false} />
</div>
);
}
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example 2: Now write down the following code in the App.js file. Here, we have shown a spinner without grow type.
App.js
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Spinner } from "reactstrap"
function App() {
return (
<div style={{
display: 'block', width: 700, padding: 30
}}>
<h4>ReactJS Reactstrap Spinner Component</h4>
<Spinner style={{ width: '2rem', height: '2rem' }}
children={false} />
</div>
);
}
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Similar Reads
React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications
15+ min read
React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
90+ React Projects with Source Code [2025] React, managed by Facebook and a vibrant community of developers and companies, is a JavaScript library designed to craft dynamic user interfaces. It empowers developers with concepts like React web apps, components, props, states, and component lifecycles. With a primary focus on building single-pa
12 min read
React Introduction ReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces. It simplifies the creation of single-page applications (SPAs) with a focus on performance and maintainability.It is developed and maintained by Facebook.The latest version of React is React 19.Uses
8 min read
React Hooks ReactJS Hooks are one of the most powerful features of React, introduced in version 16.8. They allow developers to use state and other React features without writing a class component. Hooks simplify the code, make it more readable, and offer a more functional approach to React development. With hoo
10 min read
React JSX JSX stands for JavaScript XML, and it is a special syntax used in React to simplify building user interfaces. JSX allows you to write HTML-like code directly inside JavaScript, enabling you to create UI components more efficiently. Although JSX looks like regular HTML, itâs actually a syntax extensi
6 min read
React Router React Router is a library for handling routing and navigation in React JS Applications. It allows you to create dynamic routes, providing a seamless user experience by mapping various URLs to components. It enables navigation in a single-page application (SPA) without refreshing the entire page.This
6 min read
ReactJS Virtual DOM ReactJS Virtual DOM is an in-memory representation of the actual DOM (Document Object Model). React uses this lightweight JavaScript object to track changes in the application state and efficiently update the actual DOM only where necessary.What is the Virtual DOM?The Virtual DOM (VDOM) is a lightwe
4 min read
React Lifecycle In React, the lifecycle refers to the various stages a component goes through. These stages allow developers to run specific code at key moments, such as when the component is created, updated, or removed. By understanding the React lifecycle, you can better manage resources, side effects, and perfo
7 min read
React Components In React, React components are independent, reusable building blocks in a React application that define what gets displayed on the UI. They accept inputs called props and return React elements describing the UI.In this article, we will explore the basics of React components, props, state, and render
4 min read