Implement React Suite In React JS

Hello Developers, In this blog, we will learn how we can use react suite library in our react app

What is react suite?

React Suite is a collection of UI components for building enterprise-class applications with React. It provides a set of high-quality, customizable and easy-to-use UI components that enable developers to quickly and efficiently build professional-grade applications. The components are designed to work seamlessly with each other and are optimized for performance and accessibility.

First, make a new app using the following command

npx create-react-app

Then install rsuite js in your app

npm i rsuite --save

yarn add rsuite

Now you are good to go

Import component from rsuite package in your file that you want to use and import css file in your app js file

import { Button } from 'rsuite';
import 'rsuite/dist/rsuite.min.css';

There are 5 types of a normal buttons that you can use

<Button appearance="default">Default</Button>
<Button appearance="primary">Primary</Button>
<Button appearance="link">Link</Button>
<Button appearance="subtle">Subtle</Button>
<Button appearance="ghost">Ghost</Button>

Demo:

Input addons:

const CustomInputGroup = ({ placeholder, ...props }) => (
<InputGroup {...props} style={{
  width: '25%'
}} >
  <Input placeholder={placeholder} />
  <InputGroup.Button>
    <SearchIcon />
  </InputGroup.Button>
 </InputGroup>
  );
 <Input
    placeholder="Default Input"
    type='type'
    style={{
      width: '25%'
    }}
  />
  <CustomInputGroup size="lg" placeholder="With Search button" />
  <Input
    disabled
    placeholder='Disabled'
    type='type'
    style={{
      width: '25%'
    }}
  />
  <Input
    readOnly
    placeholder='Read Only'
    type='type'
    style={{
      width: '25%'
    }}
  />

Demo: