Author: John Au-Yeung

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.

rc-table

rc-table is a library for adding simple tables in our React app.

To use it, we can run:

npm i rc-table

to install it.

Then we can use it by writing:

import React from "react";
import Table from "rc-table";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    width: 100
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
    width: 100
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
    width: 200
  },
  {
    title: "",
    dataIndex: "",
    key: "operations",
    render: () => <a href="#">Delete</a>
  }
];

const data = [
  { name: "james", age: 18, address: "address", key: "1" },
  { name: "mary", age: 26, address: "address", key: "2" }
];

export default function App() {
  return (
    <div className="App">
      <Table columns={columns} data={data} />
    </div>
  );
}

We specify the columns in the columns array.

The title is the displayed text.

dataIndex is the property name to display in the column.

key is the unique ID of the column.

width has the width.

render is a function that returns some components.

We also have the data array with the objects we want to display.

In App , we pass them all into the Table component as props to render the table.

It provides us with many other options like changing table layout, styles, making the table expandable, and more.

simplebar-react

simplebar-react lets us add a styled scrollbar to our app.

To install it, we run:

npm i simplebar-react

Then we can use it by writing:

import React from "react";
import SimpleBar from "simplebar-react";
import "simplebar/dist/simplebar.min.css";

export default function App() {
  return (
    <div className="App">
      <SimpleBar style={{ maxHeight: 300 }}>
        {Array(1000)
          .fill()
          .map((_, i) => (
            <p>{i + 1}</p>
          ))}
      </SimpleBar>
    </div>
  );
}

We just use the SimpleBar component with the bundled CSS.

The style prop is set to an object with the maxHeight .

Then we display an array of p elements within the SimpleBar component.

Then we’ll see the scrollbar provided by the package displayed.

There are also other options like forcing the scrollbar to be visible and auto-hiding scrollbars.

We can also access the SimpleBar instance with refs.

React Input Mask

The React Input Mask package is a component to let us add input masks to our app.

To install it, we run:

npm i react-text-mask

Then we can use it by writing:

import React from "react";
import MaskedInput from "react-text-mask";

export default function App() {
  return (
    <div className="App">
      <MaskedInput
        mask={[
          "(",
          /[1-9]/,
          /d/,
          /d/,
          ")",
          " ",
          /d/,
          /d/,
          /d/,
          "-",
          /d/,
          /d/,
          /d/,
          /d/
        ]}
      />
    </div>
  );
}

We use the MaskedInput component with the mask prop.

It has an array of the parts of the pattern we want to restrict the inputted value to.

It can be customized with custom components.

Also, we can add placeholders, class names, and blur and change handlers:

import React from "react";
import MaskedInput from "react-text-mask";

export default function App() {
  return (
    <div className="App">
      <MaskedInput
        mask={[
          "(",
          /[1-9]/,
          /d/,
          /d/,
          ")",
          " ",
          /d/,
          /d/,
          /d/,
          "-",
          /d/,
          /d/,
          /d/,
          /d/
        ]}
        className="form-control"
        placeholder="Enter a phone number"
        guide={false}
        id="phone-input"
        onBlur={() => {}}
        onChange={() => {}}
      />
    </div>
  );
}

We add the class name and placeholder to add styles and placeholders to them.

Also, we have the onBlur and onChange props to add those handlers to our app.

The guide is a boolean to indicate whether we want to show the characters with hints.

Conclusion

rc-table lets us add a simple table with ease.

simplebar-react is a scrollbar component for our React app.

React Input Mask lets us add an input mask to our app.

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.