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
|
|
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
|
|
Output:
Divider with Kids prop
Reference: https://rsuitejs.com/parts/divider/#props
.png)
