Top React Libraries — Tables, Masks, and Scroll Bars

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.