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.

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.

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.

Modal

We can add a modal into our React app with the Modal component.

For instance, we can write:

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

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close}>
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

We create the show state with the open function to set it to true and the close function to set it to false .

In the Modal component, we have the show prop set to the show state to control whether the modal is shown.

We pass the close function to all the button’s onClick props to close the modal when we click them.

Modal.Header has the header.

Modal.Title has the title.

Modal.Body has the body.

Modal.Footer has the modal footer.

We can disable the backdrop with the backdrop prop set to false :

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

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close} backdrop={false}>
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

The size of the modal can be changed with the size prop:

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

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close} size="xs">
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

We set it to xs to set it to the smallest size.

Other options includes sm for small, md for medium, and lg for large.

The full prop will make it large.

Conclusion

We can add a modal 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.

Modal

We can add a modal into our React app with the Modal component.

For instance, we can write:

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

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close}>
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

We create the show state with the open function to set it to true and the close function to set it to false .

In the Modal component, we have the show prop set to the show state to control whether the modal is shown.

We pass the close function to all the button’s onClick props to close the modal when we click them.

Modal.Header has the header.

Modal.Title has the title.

Modal.Body has the body.

Modal.Footer has the modal footer.

We can disable the backdrop with the backdrop prop set to false :

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

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close} backdrop={false}>
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

The size of the modal can be changed with the size prop:

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

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close} size="xs">
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

We set it to xs to set it to the smallest size.

Other options includes sm for small, md for medium, and lg for large.

The full prop will make it large.

Conclusion

We can add a modal 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.

Message

We can add a message box with the Message component.

For instance, we can write:

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

export default function App() {
  return (
    <div>
      <Message description="Information" />
    </div>
  );
}

The description prop has the text content of the message.

We can set the type prop to change the background color of the message:

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

export default function App() {
  return (
    <div>
      <Message type="success" description="Information" />
    </div>
  );
}

We can add HTML content to the description prop:

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

export default function App() {
  return (
    <div>
      <Message
        type="success"
        description={
          <p>
            Information
            <br />
            <a href="http://yahoo.com">This is a Link.</a>
          </p>
        }
      />
    </div>
  );
}

We can add the title prop to set its title:

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

export default function App() {
  return (
    <div>
      <Message
        type="success"
        title="Title"
        description={
          <p>
            Information
            <br />
            <a href="http://yahoo.com">This is a Link.</a>
          </p>
        }
      />
    </div>
  );
}

We add the showIcon prop to let us show an icon on the lefty side:

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

export default function App() {
  return (
    <div>
      <Message
        showIcon
        type="info"
        title="Information"
        description="More information"
      />
    </div>
  );
}

The icon is determined by type .

We can make it closable with the closable prop:

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

export default function App() {
  return (
    <div>
      <Message
        closable
        type="info"
        title="Information"
        description="More information"
      />
    </div>
  );
}

Loader

We can add a loading icon with the Loader component.

For instance, we can write:

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

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

We can set the size prop to set the size of the loading icon:

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

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

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

The speed of the spinning can be changed with the speed prop:

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

export default function App() {
  return (
    <div>
      <Loader size="lg" speed="fast" />;
    </div>
  );
}

speed can also be 'normal' or 'slow' .

We can add the backdrop and vertical props to center the loading spinner on the page:

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

export default function App() {
  return (
    <div>
      <Loader backdrop vertical />
    </div>
  );
}

Conclusion

We can add a message box and loading spinner 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.

Close Alerts

We can close alerts with the Alert.close and Alert.closeAll method.

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.")}>
          Info
        </Button>
        <Button onClick={() => Alert.close()}> Close </Button>
        <Button onClick={() => Alert.closeAll()}> Close all </Button>
      </ButtonToolbar>
    </div>
  );
}

Alert.close to closes the current alert.

Alert.closeAll close all open alerts.

Notification

We can add notifications into our React app with the Notification object.

For instance, we can write:

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

export default function App() {
  const open = () => {
    Notification.open({
      title: "Notify",
      description: "hello"
    });
  };

  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open </Button>
      </ButtonToolbar>
    </div>
  );
}

We call the Notification.open method to open an alert.

title has the notification title.

description has the notification content.

We can also call Notification.info , Notification.success , Notification.warning and Notification.error to open different kinds of notifications.

And we can set the placement with the placement property:

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

export default function App() {
  const open = () => {
    Notification.open({
      title: "Notify",
      description: "hello",
      placement: "topStart"
    });
  };

  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open </Button>
      </ButtonToolbar>
    </div>
  );
}

placement can be 'topStart' , 'topEnd' , 'bottomStart' , and 'bottomEnd' .

We can close notifications with the Notification.close and Notification.closeAll methods.

closeAll close all notifications.

close close the top one displayed.

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

export default function App() {
  const open = () => {
    Notification.open({
      title: "Notify",
      description: "hello"
    });
  };

  const handleClose = () => {
    Notification.close();
  };

  const handleCloseAll = () => {
    Notification.closeAll();
  };

  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open </Button>
        <Button onClick={handleClose}> Close </Button>
        <Button onClick={handleCloseAll}> Close all</Button>
      </ButtonToolbar>
    </div>
  );
}

We can set how long the notification displayed with duration :

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

export default function App() {
  const open = () => {
    Notification.open({
      title: "Notify",
      description: "hello",
      duration: 20000
    });
  };

  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open </Button>
      </ButtonToolbar>
    </div>
  );
}

Conclusion

We can add alerts and notifications into our React app with React Suite.