React Suite

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. The input component allows the user to allow the user to create a basic widget for getting the user input in a text field. We can use the following approach in ReactJS to use the React Suite Input Component.

Supported development environment:

• Supports React v16.0
• Supports Typescript
• Supports Electron
• Supports Reason

Installation: You can install it with the following command:

npm i rsuite
// or
yarn add rsuite

Now you can import rsuite component like:

import { Button } from 'rsuite';

Let's understand its working with the help of example.

Step 1: Let's create a React app:

npx create-react-app appname

Step 2: Change directory to app:

cd appname

Project Structure

Now the structure looks like this:

Install rsuite by the following command:

npm i rsuite
// or
yarn add rsuite

Update your App.js as following.

import { Tooltip } from 'rsuite';
 
function App() {
    return (
        <div style={{ height: 20 }}>
            <Tooltip visible>
                This is a <i>tooltip</i> .
            </Tooltip>
        </div>
    );
}
 
export default App;

Open the terminal and type the following command.

npm start

Output:

Features

• Server Side Rendering(SSR) - React Suite supports Server Side Rendering, Which supports Next.js to build applications.