Top React Libraries — Tabs, Notifications, Numeric Inputs, and File Upload

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

react-tabs

The react-tabs package lets us add tabs to our React app.

To install it, we run:

npm i react-tabs

Then we can use it by writing:

import React from "react";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";

export default function App() {
  return (
    <div>
      <Tabs>
        <TabList>
          <Tab>tab 1</Tab>
          <Tab>tab 2</Tab>
        </TabList>

        <TabPanel>
          <h2>some content</h2>
        </TabPanel>
        <TabPanel>
          <h2>more content</h2>
        </TabPanel>
      </Tabs>
    </div>
  );
}

We import the CSS and components that comes with the package.

Then we use the Tabs component with the TabList for adding the tab links.

TabList has the tabs links inside.

Tab is the button we can click on to switch tabs.

TabPanel has the content for each tab.

Now we get tabs with content without doing much work.

rc-upload

rc-tree is a package that provides us with a file input component.

To use it, we install it by running:

npm i rc-upload

Then we can use it by writing:

import React from "react";
import Upload from "rc-upload";

const uploaderProps = {
  action: "/upload",
  data: { foo: 1, bar: 2 },
  headers: {
    Authorization: "token"
  },
  multiple: true,
  beforeUpload(file) {
    console.log("beforeUpload", file.name);
  },
  onStart: file => {
    console.log("onStart", file.name);
  },
  onSuccess(file) {
    console.log("onSuccess", file);
  },
  onProgress(step, file) {
    console.log("onProgress", Math.round(step.percent), file.name);
  },
  onError(err) {
    console.log("onError", err);
  }
};

export default function App() {
  return (
    <div>
      <div
        style={{
          margin: 100
        }}
      >
        <div>
          <Upload {...uploaderProps}>upload file</Upload>
        </div>

        <div
          style={{
            height: 200,
            overflow: "auto",
            border: "1px solid red"
          }}
        >
          <div
            style={{
              height: 500
            }}
          >
            <Upload
              {...this.uploaderProps}
              id="test"
              component="div"
              style={{ display: "inline-block" }}
            >
              another uploader
            </Upload>
          </div>
          <label>Label for Upload</label>
        </div>
      </div>
    </div>
  );
}

We have the Uploader component which has the file upload input.

uploaderProps has an object with the upload URL, headers, data and more.

data has the request data.

action has the URL.

And we also pass in various event handlers that run in various situations.

It takes handlers for before upload, when upload starts, success, error, and progress.

rc-input-number

rc-input-number provides us with numeric input.

To install it, we run:

npm i rc-input-number

Then we use the InputNumber component that comes with the library:

import React from "react";
import InputNumber from "rc-input-number";

export default function App() {
  return (
    <div>
      <InputNumber defaultValue={100} />
    </div>
  );
}

The defaultValue has the value for the input.

We can make it a controlled input with the value and onChange props:

import React from "react";
import InputNumber from "rc-input-number";

export default function App() {
  const [value, setValue] = React.useState(100);
  const onChange = value => {
    setValue(value);
  };

  return (
    <div>
      <InputNumber value={value} onChange={onChange} />
    </div>
  );
}

We have a function to set the value state and get the value and pass it to the value prop as with any other inputs.

Also, we can make it read-only or disable it.

The formatting of the number can also change.

rc-notification

rc-notification provides us with a UI component for adding notifications in a React app.

To install it, we run:

npm i rc-notification

Then we can use it by writing:

import React, { useEffect } from "react";
import Notification from "rc-notification";

export default function App() {
  useEffect(() => {
    Notification.newInstance({}, notification => {
      notification.notice({
        content: "content"
      });
    });
  }, []);

  return <div />;
}

We import the Notification object and call the newInstance method to display a notification within the callback.

The notice method shows the notification content.

content has the notification content.

By default, it displays for 1.5 seconds.

We can change the duration of that it’s displayed, the styles, and more.

We can also remove the notification programmatically.

Conclusion

react-tabs lets us add tabs.

rc-upload is a file uploader component.

rc-input-number is a numerical input for React apps.

rc-notification is a simple notification component.