React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. It is a developer-friendly UI framework.
Installation: You can install it with the following command:
npm i rsuite // or yarn add rsuite
Now you can import suite components like:
import { Button } from 'rsuite';
Let’s understand it’s working with the help of examples.
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 rsuite
Project Structure: It will look like the following.
Example 1: In this example, we will use how to use the input component of ReactJS Suite.
App.js
import React from 'react'import 'rsuite/dist/styles/rsuite-default.css'; import { Input } from 'rsuite'; export default function App() { // State of our dream city const [dreamCity, setDreamCity] = React.useState('') return ( <div style={{ display: 'block', width: 700, paddingLeft: 30 }}> <h4>React Suite Input Component</h4> <Input placeholder="Enter your dream city" onChange={(e) => setDreamCity(e)} /> Dream City Value: {dreamCity} </div> ); } |
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: In this example, we will see how to use domHelper component of ReactJS Suite. We will use the addTheStyling method to add the style to our element at the click of the button.
App.js
import React from 'react'import 'rsuite/dist/styles/rsuite-default.css'; import { Button, DOMHelper } from 'rsuite'; const { addStyle } = DOMHelper; export default class App extends React.Component { // State holding initial style constructor(props) { super(props); this.state = { htmlCode: '<div class="view"></div>' }; } // Function to set the states with latest style showView() { const htmlCode = this.container.innerHTML; this.setState({ htmlCode }); } // Function to add the styles addTheStyling() { addStyle(this.view, { 'margin-top': '16px', 'color': 'orange' }); this.showView(); } render() { const { htmlCode } = this.state; return ( <div> <h4>React Suite DOMHelper Component</h4> <Button appearance="primary" onClick={() => this.addTheStyling()} > Click to Add Style </Button> <div>{htmlCode}</div> <div ref={ref => { this.container = ref }}> <div className="view" ref={ref => { this.view = ref }} /> </div> </div> ); } } |
Output:
Features:
- Server-Side Rendering(SSR): React Suite supports Server Side Rendering, Which supports Next.js to build applications.
Supported Platforms:
| Browser’s Name | Version |
| Internet Explorer | >=11 |
| Safari | >= 10 |
| Edge | >=14 |
| Firefox | >= 45 |
| Chrome | >= 49 |
Supported development environment:
- Supports React v16.0
- Supports Typescript
- Supports Electron
- Supports Reason
