Getting Started with React Development with the React Suite Library — Message and Loading Spinner

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.