Friday, June 17, 2022
HomeWordPress 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 parts which are designed for the center platform and back-end merchandise. The divider permits the consumer to separate UI parts from one another. 

<Divider> Props:

  • classPrefix: It’s used to indicate the prefix of the element CSS class.
  • kids: No matter you write between the divider tags is about 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 mission and set up React Suite module. Then we are going to create a UI that may create a React Suite Divider with Props.

Creating React Undertaking:

Step 1: To create a react app, you should set up react modules by npx command. “npx” is used as an alternative of “npm” as a result of you’ll 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 mission, transfer into the folder to carry out completely different operations.

cd project_name

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

npm set up rsuite

Undertaking Construction: The mission construction ought to appear like the beneath:

Undertaking Construction

Instance 1: We’re making a UI that exhibits customers completely 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.Element {

  

    render() {

        return (

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

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

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

                    DSA Self Paced </b>

                <Divider vertical />

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

                    Amazon SDE Preparation Check Sequence</b>

                <Divider vertical />

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

                    Full Interview Preparation</b>

            </div>

        );

    }

}

  

export default App;

Step to Run Software: Run the applying utilizing the next command from the foundation listing of the mission:

npm begin

Output:

Divider Prop

Instance 2: We’re making a UI that exhibits completely different sections divided with a divider with textual content utilizing kids 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",

    colour: "white",

    fontWeight: "daring",

    textAlign: "middle"

}

  

class App extends React.Element {

    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 Kids prop

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

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments