Thursday, December 5, 2024
Google search engine
HomeLanguagesReact Suite Introduction

React Suite Introduction

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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

RELATED ARTICLES

Most Popular

Recent Comments