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.

Steps Display

We can steps display with the Steps component.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Steps current={1}>
        <Steps.Item />
        <Steps.Item />
        <Steps.Item />
        <Steps.Item />
      </Steps>
    </div>
  );
}

We add the Steps component with the current prop to set the index of the current item.

And we can add title and description with the title and description props:

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

export default function App() {
  return (
    <div className="App">
      <Steps current={1}>
        <Steps.Item title="Finished" description="This is a description." />
        <Steps.Item title="In Progress" description="This is a description." />
        <Steps.Item title="Waiting" description="This is a description." />
      </Steps>
    </div>
  );
}

We can add the vertical prop to make it vertical:

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

export default function App() {
  return (
    <div className="App">
      <Steps current={1} vertical>
        <Steps.Item title="Finished" description="This is a description." />
        <Steps.Item title="In Progress" description="This is a description." />
        <Steps.Item title="Waiting" description="This is a description." />
      </Steps>
    </div>
  );
}

We can change the status color of the current step with the currentStatus prop:

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

export default function App() {
  return (
    <div className="App">
      <Steps current={1} currentStatus="error">
        <Steps.Item title="Finished" description="This is a description." />
        <Steps.Item title="In Progress" description="This is a description." />
        <Steps.Item title="Waiting" description="This is a description." />
      </Steps>
    </div>
  );
}

The small prop makes the step display smaller:

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

export default function App() {
  return (
    <div className="App">
      <Steps current={1} small>
        <Steps.Item title="Finished" />
        <Steps.Item title="In Progress" />
        <Steps.Item title="Waiting" />
      </Steps>
    </div>
  );
}

We can add icons with the icon prop:

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

export default function App() {
  return (
    <div className="App">
      <Steps current={1}>
        <Steps.Item
          title="Finished"
          icon={<Icon icon="pencil-square" size="lg" />}
        />
        <Steps.Item title="In Progress" icon={<Icon icon="book" size="lg" />} />
        <Steps.Item title="Waiting" icon={<Icon icon="wechat" size="lg" />} />
      </Steps>
    </div>
  );
}

Conclusion

We can add steps display 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.

Navbar

We can add a navbar with the Navbar component.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Navbar>
        <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>
    </div>
  );
}

We add the Navbar with the Navbar.Body to add the navbar.

Nav.Item has the nav items.

pullright makes an item stay on the right side.

And we can change the background color with the appearance prop:

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

export default function App() {
  return (
    <div className="App">
      <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>
    </div>
  );
}

Sidenav

We can add a navigation sidebar with the Sidenav prop:

import React from "react";
import { Sidenav, Dropdown, Icon, Nav } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Sidenav defaultOpenKeys={["3", "4"]} activeKey="1">
        <Sidenav.Body>
          <Nav>
            <Nav.Item eventKey="1" icon={<Icon icon="dashboard" />}>
              Dashboard
            </Nav.Item>
            <Nav.Item eventKey="2" icon={<Icon icon="group" />}>
              User Group
            </Nav.Item>
            <Dropdown
              eventKey="3"
              title="Advanced"
              icon={<Icon icon="magic" />}
            >
              <Dropdown.Item eventKey="3-1">Geo</Dropdown.Item>
              <Dropdown.Item eventKey="3-2">Devices</Dropdown.Item>
            </Dropdown>
            <Dropdown
              eventKey="4"
              title="Settings"
              icon={<Icon icon="gear-circle" />}
            >
              <Dropdown.Item eventKey="4-1">Applications</Dropdown.Item>
              <Dropdown.Item eventKey="4-2">Channels</Dropdown.Item>
            </Dropdown>
          </Nav>
        </Sidenav.Body>
      </Sidenav>
    </div>
  );
}

We just add Nav s and Dropdown s into our sidebar to add the entries.

defaultOpenKeys are set to the keys of the menus to stay open by default.

activeKey has the eventKey of the item that’s active.

The appearance can be changed with the appearance prop:

import React from "react";
import { Sidenav, Dropdown, Icon, Nav } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Sidenav appearance="inverse" defaultOpenKeys={["3", "4"]} activeKey="1">
        <Sidenav.Body>
          <Nav>
            <Nav.Item eventKey="1" icon={<Icon icon="dashboard" />}>
              Dashboard
            </Nav.Item>
            <Nav.Item eventKey="2" icon={<Icon icon="group" />}>
              User Group
            </Nav.Item>
            <Dropdown
              eventKey="3"
              title="Advanced"
              icon={<Icon icon="magic" />}
            >
              <Dropdown.Item eventKey="3-1">Geo</Dropdown.Item>
              <Dropdown.Item eventKey="3-2">Devices</Dropdown.Item>
            </Dropdown>
            <Dropdown
              eventKey="4"
              title="Settings"
              icon={<Icon icon="gear-circle" />}
            >
              <Dropdown.Item eventKey="4-1">Applications</Dropdown.Item>
              <Dropdown.Item eventKey="4-2">Channels</Dropdown.Item>
            </Dropdown>
          </Nav>
        </Sidenav.Body>
      </Sidenav>
    </div>
  );
}

Conclusion

We can add navbar and sidebar navigation 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.

Nav Menus

We can add a nav menu with the Nav component.

To add it, we write:

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

export default function App() {
  const [activeKey, setActiveKey] = useState();

  const handleSelect = (activeKey) => {
    setActiveKey(activeKey);
  };

  return (
    <div className="App">
      <Nav activeKey={activeKey} onSelect={handleSelect}>
        <Nav.Item eventKey="home" icon={<Icon icon="home" />}>
          Home
        </Nav.Item>
        <Nav.Item eventKey="news">News</Nav.Item>
        <Nav.Item eventKey="solutions">Solutions</Nav.Item>
      </Nav>
    </div>
  );
}

We pass the activeKey to the activeKey prop.

handleSelect lets us get the activeKey and set it.

Nav.Item has the menu item.

It’ll highlight when the activeKey matches the eventKey .

We can add an icon with the icon prop.

We can add the vertical prop to make the nav vertical:

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

export default function App() {
  const [activeKey, setActiveKey] = useState();

  const handleSelect = (activeKey) => {
    setActiveKey(activeKey);
  };

  return (
    <div className="App">
      <Nav vertical activeKey={activeKey} onSelect={handleSelect}>
        <Nav.Item eventKey="home" icon={<Icon icon="home" />}>
          Home
        </Nav.Item>
        <Nav.Item eventKey="news">News</Nav.Item>
        <Nav.Item eventKey="solutions">Solutions</Nav.Item>
      </Nav>
    </div>
  );
}

We can set the nav item to be active with the active prop:

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

export default function App() {
  const [activeKey, setActiveKey] = useState();

  const handleSelect = (activeKey) => {
    setActiveKey(activeKey);
  };

  return (
    <div className="App">
      <Nav onSelect={handleSelect}>
        <Nav.Item eventKey="home" active={activeKey === "home"}>
          Home
        </Nav.Item>
        <Nav.Item eventKey="news" active={activeKey === "news"}>
          News
        </Nav.Item>
        <Nav.Item eventKey="solutions" active={activeKey === "solutions"}>
          Solutions
        </Nav.Item>
      </Nav>
    </div>
  );
}

And we can disable an item with the disabled prop:

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

export default function App() {
  const [activeKey, setActiveKey] = useState();

  const handleSelect = (activeKey) => {
    setActiveKey(activeKey);
  };

  return (
    <div className="App">
      <Nav activeKey={activeKey} onSelect={handleSelect}>
        <Nav.Item eventKey="home">Home</Nav.Item>
        <Nav.Item eventKey="news" disabled>
          News
        </Nav.Item>
        <Nav.Item eventKey="solutions">Solutions</Nav.Item>
      </Nav>
    </div>
  );
}

To make nav items have equal sizes, we can add the justified prop:

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

export default function App() {
  const [activeKey, setActiveKey] = useState();

  const handleSelect = (activeKey) => {
    setActiveKey(activeKey);
  };

  return (
    <div className="App">
      <Nav activeKey={activeKey} justified onSelect={handleSelect}>
        <Nav.Item eventKey="home">Home</Nav.Item>
        <Nav.Item eventKey="news">News</Nav.Item>
        <Nav.Item eventKey="solutions">Solutions</Nav.Item>
      </Nav>
    </div>
  );
}

Also, we can add dropdowns into our nav with the Dropdown component:

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

export default function App() {
  const [activeKey, setActiveKey] = useState();

  const handleSelect = (activeKey) => {
    setActiveKey(activeKey);
  };

  return (
    <div className="App">
      <Nav activeKey={activeKey} onSelect={handleSelect}>
        <Nav.Item eventKey="home">Home</Nav.Item>
        <Nav.Item eventKey="news">News</Nav.Item>
        <Nav.Item eventKey="solutions">Solutions</Nav.Item>
        <Dropdown title="Fruit">
          <Dropdown.Item>Apple</Dropdown.Item>
          <Dropdown.Item>Orange</Dropdown.Item>
          <Dropdown.Menu title="Grape">
            <Dropdown.Item>Red</Dropdown.Item>
            <Dropdown.Item active>Green</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      </Nav>
    </div>
  );
}

Conclusion

We can add nav menus 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.

Dropdown Dividers and Panels

We can add dividers into our dropdown menu with the divider prop:

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

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit">
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item divider />
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

And we can add a panel into the dropdown with the panel prop:

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

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit">
        <Dropdown.Item panel style={{ padding: 10, width: 160 }}>
          <strong>Select a fruit</strong>
        </Dropdown.Item>
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

We can change the placement of the dropdown menu with the placement prop:

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

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit" placement="rightStart">
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

Other values include leftStart , leftEnd , bottomStart , bottomEnd , rightEnd , topStart and topEnd .

We can nest dropdown menus in another dropdown menu.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit">
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
        <Dropdown.Menu title="Color">
          <Dropdown.Item>Green</Dropdown.Item>
          <Dropdown.Item>Red</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}

We put the Dropdown.Menu into the Dropdown to add a nested menu.

Also, we can add a menu button that has an icon in the button content.

For instance. we can write:

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

export default function App() {
  return (
    <div className="App">
      <Dropdown
        title="Fruit"
        renderTitle={() => {
          return (
            <IconButton icon={<Icon icon="plus" />} placement="left">
              Fruit
            </IconButton>
          );
        }}
      >
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

We add the IconButton into the renderTitle prop to render the button.

Also, we can use dropdowns with popovers by writing:

import React from "react";
import { Dropdown, Popover, Whisper, Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

const MenuPopover = ({ onSelect, ...rest }) => {
  return (
    <Popover {...rest} full>
      <Dropdown.Menu onSelect={onSelect}>
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown.Menu>
    </Popover>
  );
};

export default function App() {
  const triggerRef = React.createRef();
  const handleSelectMenu = (eventKey, event) => {
    console.log(eventKey);
    triggerRef.current.hide();
  };

  return (
    <div className="App">
      <Whisper
        placement="bottomStart"
        trigger="click"
        triggerRef={triggerRef}
        speaker={<MenuPopover onSelect={handleSelectMenu} />}
      >
        <Button>Fruit</Button>
      </Whisper>
    </div>
  );
}

We create the MenuPopover component that takes props.

We pass onSelect to Dropdown.Menu to lets us control the menu from the button trigger.

The rest of the props are passed into the Popover component.

To add the popover trigger, we add the Whisper component and add a Button inside to make the Button a popover trigger.

We make the menu open by passing MenuPopover into the speaker prop.

Conclusion

We can add dropdowns with various options 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.

Dropdowns

We can add a select dropdown with the Dropdown component.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit">
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

The title prop has the placeholder.

Dropdown.Item has the dropdown items.

We can change how a dropdown is opened.

For instance, we can make it open on hover by setting the trigger prop:

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

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit" trigger="hover">
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

We can make a context menu by setting trigger to 'contextMenu' :

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

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit" trigger="contextMenu">
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

The default value of trigger is 'click' .

We can also assign a key to each item and set the default key.

To do this, we write:

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

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit" activeKey="a">
        <Dropdown.Item eventKey="a">Apple</Dropdown.Item>
        <Dropdown.Item eventKey="b">Orange</Dropdown.Item>
        <Dropdown.Item eventKey="c">Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

We set activeKey to 'a' to set the active key.

eventKey is assigned to each item.

If activeKey and eventKey match, then the item will be highlighted.

To disable an item, we can add the disabled prop to it:

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

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit">
        <Dropdown.Item disabled>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

We can change the size of a dropdown button with the size prop:

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

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit" size="lg">
        <Dropdown.Item disabled>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

'lg' is large.

We can make it extra small with 'xs' .

'sm' is small. And 'md' is medium.

We can remove the caret from the dropdown button with the noCaret prop:

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

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit" noCaret>
        <Dropdown.Item disabled>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

And we can add an icon to the button with the icon prop:

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

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit" icon={<Icon icon="file" />}>
        <Dropdown.Item disabled>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

Conclusion

We can add simple dropdown menus into our React app with React Suite.