Category: React Suite

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Radio Buttons

We can add radio button groups with React Suite’s Radio and RadioGroup components.

For instance, we can write:

import React from "react";
import { Radio } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Radio> Radio</Radio>
      <Radio checked> Checked Radio</Radio>
    </div>
  );
}

The checked prop lets us make the radio button selected.

The disabled prop disables the radio button.

We can add radio button groups with the RadioGroup component.

For instance, we can write:

import React from "react";
import { Radio, RadioGroup } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <RadioGroup name="radioList">
        <p>Group 1</p>
        <Radio value="A">Item A</Radio>
        <Radio value="B">Item B</Radio>
        <p>Group 2</p>
        <Radio value="C">Item C</Radio>
        <Radio value="D" disabled>
          Item D
        </Radio>
      </RadioGroup>
    </div>
  );
}

to add 4 radio buttons into one group.

The inline prop makes the radio buttons inline:

import React from "react";
import { Radio, RadioGroup } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <RadioGroup name="radioList" inline>
        <p>Group 1</p>
        <Radio value="A">Item A</Radio>
        <Radio value="B">Item B</Radio>
        <p>Group 2</p>
        <Radio value="C">Item C</Radio>
        <Radio value="D" disabled>
          Item D
        </Radio>
      </RadioGroup>
    </div>
  );
}

We can set the default selected value with the defaultValue prop:

import React from "react";
import { Radio, RadioGroup } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <RadioGroup name="radioList" inline appearance="picker" defaultValue="A">
        <p>Group 1</p>
        <Radio value="A">Item A</Radio>
        <Radio value="B">Item B</Radio>
        <p>Group 2</p>
        <Radio value="C">Item C</Radio>
        <Radio value="D" disabled>
          Item D
        </Radio>
      </RadioGroup>
    </div>
  );
}

appearance changes the appearance of the radio buttons.

'picker' turns them into buttons.

Text Input

We can add a text input into our app with the Input and InputGroup components.

For instance, we can write:

import React from "react";
import { Input } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Input placeholder="Input" />
    </div>
  );
}

We set the placeholder prop to show the placeholder.

To add an input with an icon at the end, we write:

import React from "react";
import { Input, InputGroup, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <InputGroup inside>
        <Input placeholder="Input" />
        <InputGroup.Button>
          <Icon icon="search" />
        </InputGroup.Button>
      </InputGroup>
    </div>
  );
}

We add the InputGroup component to add the input group.

The inside prop lets us add content into our Input .

InputGroup.Button lets us add a button at the end of the input.

We have an Icon in the input, which will be rendered on the right side.

We can the size prop of the InputGroup to change the input size.

xs is extra small, sm is small, md is medium, and lg is large.

Conclusion

We can add an input field and radio button with components provided by React Suite.

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Form

We can add forms into our React app with components provided by React Suite.

For instance, we can write:

import React from "react";
import {
  Form,
  FormGroup,
  FormControl,
  ControlLabel,
  HelpBlock,
  ButtonToolbar,
  Button
} from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Form>
        <FormGroup>
          <ControlLabel>Username</ControlLabel>
          <FormControl name="name" />
          <HelpBlock>Required</HelpBlock>
        </FormGroup>
        <FormGroup>
          <ControlLabel>Textarea</ControlLabel>
          <FormControl rows={5} name="textarea" componentClass="textarea" />
        </FormGroup>
        <FormGroup>
          <ButtonToolbar>
            <Button appearance="primary">Submit</Button>
            <Button appearance="default">Cancel</Button>
          </ButtonToolbar>
        </FormGroup>
      </Form>
    </div>
  );
}

The Form component renders into a form element.

FormGroup lets us group form control elements.

ControlLabel has the label.

FormControl has the form control.

We can render FormControl as various kinds of controls.

HelpBlock has the input hint.

ButtonToolbar lets us add a button toolbar.

ButtonGroup lets us add a button group.

componentClass lets us set the element to render the form control as.

We can set the layout to 'horizontal' to make the label and form control side by side:

import React from "react";
import {
  Form,
  FormGroup,
  FormControl,
  ControlLabel,
  HelpBlock,
  ButtonToolbar,
  Button
} from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Form layout="horizontal">
        <FormGroup>
          <ControlLabel>Username</ControlLabel>
          <FormControl name="name" />
          <HelpBlock>Required</HelpBlock>
        </FormGroup>
        <FormGroup>
          <ControlLabel>Textarea</ControlLabel>
          <FormControl rows={5} name="textarea" componentClass="textarea" />
        </FormGroup>
        <FormGroup>
          <ButtonToolbar>
            <Button appearance="primary">Submit</Button>
            <Button appearance="default">Cancel</Button>
          </ButtonToolbar>
        </FormGroup>
      </Form>
    </div>
  );
}

We can also add inline layouts with layout set to 'inline' :

import React from "react";
import {
  Form,
  FormGroup,
  FormControl,
  ControlLabel,
  ButtonToolbar,
  Button
} from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Form layout="inline">
        <FormGroup>
          <ControlLabel>Username</ControlLabel>
          <FormControl name="name" />
        </FormGroup>
        <FormGroup>
          <ControlLabel>Textarea</ControlLabel>
          <FormControl rows={5} name="textarea" componentClass="textarea" />
        </FormGroup>
        <FormGroup>
          <ButtonToolbar>
            <Button appearance="primary">Submit</Button>
            <Button appearance="default">Cancel</Button>
          </ButtonToolbar>
        </FormGroup>
      </Form>
    </div>
  );
}

Checkbox

We can add a checkbox with the Checkbox and CheckboxGroup components.

For instance, we can write:

import React from "react";
import { Checkbox } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Checkbox defaultChecked> Checked</Checkbox>
    </div>
  );
}

The defaultChecked prop will make it checked by default.

We can also make it disabled with the disabled prop.

And we can make it accept an indeterminate state with the indeterminate prop.

We can get the checked value from the onChange handler.

For instance, we can write:

import React, { useState } from "react";
import { Checkbox, CheckboxGroup } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [value, setValue] = useState([]);
  const handleChange = (value) => {
    console.log(value);
    setValue(value);
  };

  return (
    <div className="App">
      <CheckboxGroup
        inline
        name="checkboxList"
        value={value}
        onChange={handleChange}
      >
        <Checkbox value="A">Item A</Checkbox>
        <Checkbox value="B">Item B</Checkbox>
        <Checkbox value="C">Item C</Checkbox>
        <Checkbox value="D">Item D</Checkbox>
      </CheckboxGroup>
    </div>
  );
}

to get the checked values from value array parameter.

We call setValue to set the checked value as the value of the value state.

Conclusion

We can add forms and checkboxes easily into our React app with React Suite.

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Flex Order

We can change the order of flexbox items with the order prop:

import React from "react";
import { FlexboxGrid } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <FlexboxGrid>
        <FlexboxGrid.Item colspan={4} order={4}>
          order={4}
        </FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4} order={3}>
          order={3}
        </FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4} order={2}>
          order={2}
        </FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4} order={1}>
          order={1}
        </FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}

We should see them displayed according to their order value from left to right.

Also, we can set the componentClass to Col to make the flexbox items responsive:

import React from "react";
import { FlexboxGrid, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <FlexboxGrid justify="space-around">
        <FlexboxGrid.Item componentClass={Col} colspan={24} md={6}>
          colspan={24} md={6}
        </FlexboxGrid.Item>
        <FlexboxGrid.Item componentClass={Col} colspan={24} md={6}>
          colspan={24} md={6}
        </FlexboxGrid.Item>
        <FlexboxGrid.Item componentClass={Col} colspan={24} md={6} smHidden>
          colspan={24} md={6} smHidden
        </FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}

Container

The Container component lets us add a container layout into our React app.

For instance, we can write:

import React from "react";
import { Container, Header, Content, Footer, Sidebar } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Container>
        <Header>Header</Header>
        <Content>Content</Content>
        <Footer>Footer</Footer>
      </Container>
    </div>
  );
}

to add a container layout.

We have the Header , Content , and Footer components to add those to our layout.

Also, we can add a sidebar with the Sidebar component:

import React from "react";
import { Container, Header, Content, Footer, Sidebar } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Container>
        <Header>Header</Header>
        <Container>
          <Content>Content</Content>
          <Sidebar>Sidebar</Sidebar>
        </Container>
        <Footer>Footer</Footer>
      </Container>
    </div>
  );
}

We can add a Navbar to the Header to add navigation:

import React from "react";
import {
  Container,
  Header,
  Content,
  Footer,
  Sidebar,
  Navbar,
  Nav,
  Icon,
  Dropdown
} from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Container>
        <Header>
          <Navbar appearance="inverse">
            <Navbar.Body>
              <Nav>
                <Nav.Item icon={<Icon icon="home" />}>Home</Nav.Item>
                <Nav.Item>News</Nav.Item>
                <Nav.Item>Products</Nav.Item>
                <Dropdown title="About">
                  <Dropdown.Item>Company</Dropdown.Item>
                  <Dropdown.Item>Team</Dropdown.Item>
                </Dropdown>
              </Nav>
              <Nav pullRight>
                <Nav.Item icon={<Icon icon="cog" />}>Settings</Nav.Item>
              </Nav>
            </Navbar.Body>
          </Navbar>
        </Header>
        <Container>
          <Content>Content</Content>
        </Container>
        <Footer>Footer</Footer>
      </Container>
    </div>
  );
}

Conclusion

We can change the order of flex items, add a grid layout, and add a container layout into our React app with React Suite.

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Column Gutter and Spacing

We can add a gutter to the column with the gutter prop:

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row gutter={16}>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
        </Row>
      </Grid>
    </div>
  );
}

The unit is in pixels.

We can set the number of columns to offset with xsOffset :

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row gutter={16}>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2} xsOffset={16}>
            xs={2}
          </Col>
        </Row>
      </Grid>
    </div>
  );
}

mdOffset , smOffset , lgOffset lets us set offsets for the other breakpoints.

We can push and pull columns with the xsPush and xsPull props:

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row gutter={16}>
          <Col xs={6} xsPush={6}>
            xs=6
          </Col>
          <Col xs={6} xsPull={6}>
            xs=6
          </Col>
        </Row>
      </Grid>
    </div>
  );
}

We can replace xs with the other breakpoints to set push and pull for the other breakpoints.

We can hide columns by breakpoints.

For example, we can write:

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row>
          <Col md={6} xsHidden>
            md=6
          </Col>
          <Col xs={6}>xs=6</Col>
        </Row>
      </Grid>
    </div>
  );
}

xsHidden hides the column with the xs breakpoint is hit.

We can replace xs with the other breakpoints to hide it.

FlexboxGrid

We can add a flexbox layout with the FlexboxGrid component.

The grid is divided into 24 columns.

For instance, we can write:

import React from "react";
import { FlexboxGrid } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <FlexboxGrid>
        <FlexboxGrid.Item colspan={6}>colspan={6}</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={6}>colspan={6}</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={6}>colspan={6}</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={6}>colspan={6}</FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}

to add FlexboxGrid.Item components to add columns.

colspan lets us set the number of columns.

We can set how the items are laid out with the justify prop:

import React from "react";
import { FlexboxGrid } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <FlexboxGrid justify="center">
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}

We can use other justify-content values with justify .

Also, we can set the align prop:

import React from "react";
import { FlexboxGrid } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <FlexboxGrid align="middle" style={{ height: 300 }}>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}

Any align-items value can be set as the value of the align prop.

Conclusion

We can space column spacing and add flexbox containers into our React app with React Suite.

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Pagination

We can add pagination buttons with the Pagination component.

For instance, we can write:

import React from "react";
import { Pagination } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Pagination pages={10} activePage={1} />
    </div>
  );
}

pages sets the number of links to display.

activePages sets the active page number.

We can change the size with the size prop:

import React from "react";
import { Pagination } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Pagination pages={10} activePage={1} size="lg" />
    </div>
  );
}

'lg' makes it large.

xs makes it extra small, sm makes it small, md makes it medium-sized.

We can add buttons to jump to different pages with various props:

import React from "react";
import { Pagination } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Pagination pages={10} activePage={1} prev last next first />
    </div>
  );
}

prev goes to the previous pagination button.

last goes to the last pagination button.

next goes to the next pagination button.

first goes to the first pagination button.

Breadcrumb

We can add breadcrumbs with the Breadcrumb component.

For instance, we can write:

import React from "react";
import { Breadcrumb } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Breadcrumb>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>Components</Breadcrumb.Item>
        <Breadcrumb.Item active>Breadcrumb</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
}

Breadcrumb.Item has the breadcrumb items.

We can change the separator with the separator prop:

import React from "react";
import { Breadcrumb } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Breadcrumb separator="-">
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>Components</Breadcrumb.Item>
        <Breadcrumb.Item active>Breadcrumb</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
}

active makes the item active.

We can set the max items to display with the maxItems prop:

import React from "react";
import { Breadcrumb } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Breadcrumb
        maxItems={5}
        onExpand={() => {
          console.log("call onExpand");
        }}
      >
        <Breadcrumb.Item>Item A</Breadcrumb.Item>
        <Breadcrumb.Item>Item B</Breadcrumb.Item>
        <Breadcrumb.Item>Item C</Breadcrumb.Item>
        <Breadcrumb.Item>Item D</Breadcrumb.Item>
        <Breadcrumb.Item>Item E</Breadcrumb.Item>
        <Breadcrumb.Item>Item F</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
}

Grid

We can add a grid with the Grid , Row , and Col components.

For instance, we can write:

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row className="show-grid">
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
        </Row>
      </Grid>
    </div>
  );
}

xs is represents the xs breakpoint.

It’s the number of columns that the Col takes out of 24 columns.

The following are the width for each breakpoint:

• xs, extra-small: less than480px
• sm, small: greater than or equal to480px
• md, medium: greater than or equal to992px
• lg, large: greater than or equal to1200px

Conclusion

We can add pagination and grids with React Suite.