Open In App

React Suite Loader Custom Description

Improve
Improve
Like Article
Like
Save
Share
Report

A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React suite Loader custom description. A loader is a component that provides state during data loading and the loader can also be used with a custom description. A custom description is a text which denotes what data is being loaded.

Loader Props:

  • backdrop: It indicates whether the background is displayed.
  • center: It makes components centered in the container.
  • classPrefix: It denotes the prefix of the component CSS class.
  • content: It adds a custom descriptive text.
  • inverse: It denotes the alternative dark visual style for the Loader.
  • size: It set the loader dimensions.
  • speed: It denotes the speed at which the loader rotates.
  • vertical: It indicates whether the icon is displayed vertically with the text or not.

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

 

Syntax:

// Import statement
import Loader from 'rsuite/Loader';

// App.JS file
function App() {
    <Loader content="Loading..." vertical />
}

Example 1: Below example demonstrates the loader with a custom description of different sizes.

Javascript




import React from "react";
import { Button, ButtonToolbar, 
    Loader, Popover, Whisper } from "rsuite/";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Loader Custom description
                </h4>
  
                <div style={{ 
                    display: 'block'
                    width: 350, 
                    marginTop: 20 
                }}>
                    <Loader size="sm" content=
                        "Custom descriptive text..." />
                    <Loader size="md" content=
                        "Custom descriptive text..." />
                    <Loader size="lg" content=
                        "Custom descriptive text..." />
                </div>
            </div>
        </center>
    );
}


Output:

 

Example 2: Below example demonstrates the vertical loader with a custom description.

Javascript




import React from "react";
import { Button, ButtonToolbar, Loader,
    Popover, Whisper } from "rsuite/";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Loader Custom description
                </h4>
  
                <div style={{ marginTop: 20 }}>
                    <Loader size="md" content=
                        "Vertical Custom description..." 
                        vertical />
                </div>
            </div>
        </center>
    );
}


Output:

 

Reference: https://rsuitejs.com/components/loader/#custom-description



Last Updated : 15 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads