Monday, July 4, 2022
HomeSoftware DevelopmentReact Suite Prop - GeeksforGeeks

React Suite Prop – GeeksforGeeks


View Dialogue

Enhance Article

Save Article

Like Article

React Suite is a well-liked front-end library with a set of React elements which might be designed for the center platform and back-end merchandise. The divider permits the person to separate UI elements from one another. 

<Divider> Props:

  • classPrefix: It’s used to indicate the prefix of the element CSS class.
  • youngsters: No matter you write between the divider tags is ready as a textual content for the divider.
  • vertical: It’s used to specify if the divider is vertical or not.

Strategy: Allow us to create a React challenge and set up React Suite module. Then we’ll create a UI that may create a React Suite Divider with Props.

Creating React Mission:

Step 1: To create a react app, it’s good to set up react modules by means of npx command. “npx” is used as a substitute of “npm” as a result of you can be needing this command in your app’s lifecycle solely as soon as.

npx create-react-app project_name

Step 2: After creating your react challenge, transfer into the folder to carry out totally different operations.

cd project_name

Step 3: After creating the ReactJS utility, Set up the required module utilizing the next command:

npm set up rsuite

Mission Construction: The challenge construction ought to appear like the under:

Mission Construction

Instance 1: We’re making a UI that exhibits customers totally different GFG programs separated utilizing vertical prop and divider string class prefix.

App.js

import React from "react";

import { Divider } from 'rsuite';

import '../node_modules/rsuite/dist/rsuite.min.css';

  

class App extends React.Part {

  

    render() {

        return (

            <div model={{ margin: 100 }}>

                <p>Select your favorite GFG course:</p><br />

                <b model={{ shade: "inexperienced" }}>

                    DSA Self Paced </b>

                <Divider vertical />

                <b model={{ shade: "inexperienced" }}>

                    Amazon SDE Preparation Check Sequence</b>

                <Divider vertical />

                <b model={{ shade: "inexperienced" }}>

                    Full Interview Preparation</b>

            </div>

        );

    }

}

  

export default App;

Step to Run Utility: Run the applying utilizing the next command from the basis listing of the challenge:

npm begin

Output:

Divider Prop

Instance 2: We’re making a UI that exhibits totally different sections divided with a divider with textual content utilizing youngsters prop and divider string class prefix.

Javascript

import React from "react";

import { Divider } from 'rsuite';

import '../node_modules/rsuite/dist/rsuite.min.css';

  

const myComponentStyle = {

    top: 50,

    paddingTop: 15,

    backgroundColor: "inexperienced",

    shade: "white",

    fontWeight: "daring",

    textAlign: "middle"

}

  

class App extends React.Part {

    render() {

        return (

            <div model={{ margin: 100 }}>

                <p model={myComponentStyle}>Part</p>

  

                <Divider>Divider 1</Divider>

                <p model={myComponentStyle}>Part</p>

  

                <Divider>Divider 2</Divider>

                <p model={myComponentStyle}>Part</p>

  

                <Divider>Divider 3</Divider>

                <p model={myComponentStyle}>Part</p>

  

            </div>

        );

    }

}

  

export default App;

Output:

Divider with Youngsters prop

Reference: https://rsuitejs.com/elements/divider/#props

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments