Category: JavaScript

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.

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.

Divider

We can add a divider into our app with the Divider component.

For instance, we can write:

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

export default function App() {
  return (
    <div>
      <p>hello</p>
      <Divider />
      <p>world</p>
    </div>
  );
}

to add a divider between the 2 p elements.

We can add a divider with text:

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

export default function App() {
  return (
    <div>
      <Divider>Divider</Divider>
    </div>
  );
}

It’ll be shown in the middle of the divider.

We can add vertical dividers with the vertical prop:

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

export default function App() {
  return (
    <div>
      <span>Edit</span>
      <Divider vertical />
      <span>Update</span>
      <Divider vertical />
      <span>Save</span>
    </div>
  );
}

Progress Bar

We can add a progress bar with the Progress module.

For instance, we can write:

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

export default function App() {
  return (
    <div>
      <Progress.Line percent={30} status="active" />
    </div>
  );
}

to add a progress bar.

percent is the progress percentage.

status has the color of the bar.

We can hide the percentage display on the right with showInfo set to false :

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

export default function App() {
  return (
    <div>
      <Progress.Line percent={30} status="active" showInfo={false} />
    </div>
  );
}

Also, we can add a progress circle with the Progress.Circle component:

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

export default function App() {
  return (
    <div>
      <Progress.Circle percent={30} strokeColor="#ffc107" />
    </div>
  );
}

Placeholder

We can add placeholders into our app with the Placeholder module.

For instance, we can write:

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

export default function App() {
  return (
    <div>
      <Placeholder.Paragraph style={{ marginTop: 30 }} graph="circle" />
    </div>
  );
}

to add a paragraph placeholder.

We set graph to 'circle' to add a circle on the left side.

We can also set it to 'square' and 'image' .

Also, we can add a grid placeholder with Placeholder.Grid :

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

export default function App() {
  return (
    <div>
      <Placeholder.Grid rows={5} columns={6} active />
    </div>
  );
}

We can add a graph placeholder with Placeholder.Graph :

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

export default function App() {
  return (
    <div>
      <Placeholder.Graph active />
    </div>
  );
}

Conclusion

We can add dividers, progress bars, and placeholders into our app with React Suite.