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.

Icons

We can add icons to our React app with the Icon component.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Icon icon="star" />
    </div>
  );
}

The icon prop has the name of the icon we want to add.

We can set the size with the size prop:

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

export default function App() {
  return (
    <div className="App">
      <Icon icon="star" size="lg" />
    </div>
  );
}

And we can stack multiple icons together with the IconStack component:

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

export default function App() {
  return (
    <div className="App">
      <IconStack size="lg">
        <Icon icon="camera" stack="1x" />
        <Icon icon="ban" stack="2x" style={{ color: "#f44336" }} />
      </IconStack>
    </div>
  );
}

Tooltip

We can add a tooltip with React Suite’s Tooltip component.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Tooltip visible>This is a tooltip.</Tooltip>
    </div>
  );
}

We can add the Whisper component to add let us add a trigger to open the tooltip.

For instance, we can add a button trigger by writing:

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

export default function App() {
  return (
    <div className="App">
      <Whisper
        trigger="click"
        placement="right"
        speaker={<Tooltip>tooltip</Tooltip>}
      >
        <Button appearance="subtle">click me</Button>
      </Whisper>
    </div>
  );
}

We put the Tooltip in the speaker prop to and the Button inside the Whisper component to make the button trigger the tooltip.

We can set placement to other values listed at https://rsuitejs.com/components/tooltip/

Also, we can make disabled buttons trigger tooltips by writing:

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

export default function App() {
  return (
    <div className="App">
      <Whisper speaker={<Tooltip> Tooltip!</Tooltip>}>
        <span>
          <Button disabled style={{ pointerEvents: "none" }}>
            button
          </Button>
        </span>
      </Whisper>
    </div>
  );
}

We need to set pointerEvents to 'none' to let us trigger the tooltip when we hover over the disabled button.

Alert

We can add alerts with the Alert object.

For instance, we can write:

import React from "react";
import { Alert, ButtonToolbar, Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={() => Alert.info("This is a informations.", 5000)}>
          Info
        </Button>
      </ButtonToolbar>
    </div>
  );
}

We call Alert.info method to show the alert text in the first argument.

The 2nd argument is the number of milliseconds to show the alert.

Also, we can call Alert.success , Alert.warning , and Alert.error to show other kinds of alerts.

Conclusion

We can show alerts and icons in 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.

Installation

We can install React Suite by running:

npm i rsuite --save

with NPM or we run:

yarn add rsuite

with Yarn.

Button

Once we installed the package, we can add a button by using the Button component:

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

export default function App() {
  return (
    <div className="App">
      <Button appearance="default">Default</Button>
    </div>
  );
}

We set the background color with the appearance prop.

Other possible values include primary , link , subtle , and ghost .

We have to add the bundled CSS to see the styles.

We can change the size with the size prop:

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

export default function App() {
  return (
    <div className="App">
      <Button size="lg">Default</Button>
    </div>
  );
}

lg makes it large.

Other values include md for medium size, sm for small size, or xs for extra small.

We can add an icon button with the IconButton component.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <IconButton icon={<Icon icon="star" />} circle size="lg" />
    </div>
  );
}

We can add a button group with ButtonGroup :

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

export default function App() {
  return (
    <div className="App">
      <ButtonGroup size="md">
        <Button>Left</Button>
        <Button>Center</Button>
        <Button>Right</Button>
      </ButtonGroup>
    </div>
  );
}

We can set the color with the color prop:

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

export default function App() {
  return (
    <div className="App">
      <Button color="orange">Orange</Button>
    </div>
  );
}

We can add icons to buttons with the Icon component:

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

export default function App() {
  return (
    <div className="App">
      <Button color="red">
        <Icon icon="google-plus-circle" /> Google Plus
      </Button>
    </div>
  );
}

We can add a block-level button with the block prop:

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

export default function App() {
  return (
    <div className="App">
      <ButtonToolbar>
        <Button appearance="default" block>
          Block
        </Button>
      </ButtonToolbar>
    </div>
  );
}

Also, we can add a vertical button group with the vertical prop on the ButtonGroup :

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

const appearance = "primary";

export default function App() {
  return (
    <div className="App">
      <ButtonGroup vertical>
        <Button appearance={appearance}>Top</Button>
        <Button appearance={appearance}>Middle</Button>
        <Button appearance={appearance}>Bottom</Button>
      </ButtonGroup>
    </div>
  );
}

And we can make the buttons equally side in the button group with the justified prop:

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

const appearance = "primary";

export default function App() {
  return (
    <div className="App">
      <ButtonGroup justified>
        <Button appearance={appearance}>Top</Button>
        <Button appearance={appearance}>Middle</Button>
        <Button appearance={appearance}>Bottom</Button>
      </ButtonGroup>
    </div>
  );
}

Conclusion

We can install React Suite and add buttons from them easily in our React app.