Getting Started with React Development with the React Suite Library — Icons and Alerts

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.