Top React Libraries — Date Picker, Input Mask, and Tables

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-datetime

The react-datetime package lets us add a date or time picker to our app.

To install it, we run:

npm i react-datetime moment

Then we can use it by writing:

import React from "react";
const Datetime = require("react-datetime");

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

This will show a date picker that we can select a date from.

We can also customize the appearance of the date picker by writing:

import React from "react";
const Datetime = require("react-datetime");

const renderDay = (props, currentDate, selectedDate) => {
  const date = currentDate.date();
  return <td {...props}>{date < 10 ? "0" + date : date}</td>;
};

const renderMonth = (props, month, year, selectedDate) => {
  return <td {...props}>{month}</td>;
};

const renderYear = (props, year, selectedDate) => {
  return <td {...props}>{year % 100}</td>;
};

export default function App() {
  return (
    <div>
      <Datetime
        renderDay={renderDay}
        renderMonth={renderMonth}
        renderYear={renderYear}
      />
    </div>
  );
}

We added 3 functions to render the day, month, and year differently than the default way.

We can change the date format, time format, locale, value, and more.

Also, we can make it a controlled component by writing:

import React from "react";
const Datetime = require("react-datetime");

export default function App() {
  const [value, setValue] = React.useState(new Date());

  return (
    <div>
      <Datetime value={value} onChange={val => setValue(val.toDate())} />
    </div>
  );
}

We pass in the value to get the value and onChange to set it.

val is a moment object, so we’ve to convert to a Date instance with toDate .

rc-table

rc-table is a package that lets us add tables easily in our React app.

To install it, we run:

npm i rc-table

Then we write:

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: "Operations",
    dataIndex: "",
    key: "operations",
    render: () => <a href="#">Delete</a>
  }
];

const data = [
  { name: "james", age: 22, address: "some where", key: "1" },
  { name: "mary", age: 33, address: "some where", key: "2" }
];

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

to use it.

We have the columns defined in the columns array.

title has the headings.

dataIndex has the property key of the of the entry to display for that column.

key is the unique key of the column.

width has the column width in pixels.

render has the component to render.

data has the data, which is an array of objects.

In App , we use the provided Table component with the columns prop with the columns. data has the data to display.

react-input-mask

react-input-mask provides us with an easy to use input mask.

To install it, we run:

npm i react-input-mask

Then we can use it by writing:

import React from "react";
import InputMask from "react-input-mask";

export default function App() {
  return (
    <div>
      <InputMask mask="+49 999 999 9999" maskChar=" " />
    </div>
  );
}

We use the InputMask component to add the input.

mask has the pattern to restrict the input to.

maskChar is the character to cover the unfilled parts of the mask.

We can also change the characters for formatting in the mask.

Also, we can use it with Material UI.

We can also turn it to a controlled component with the value and onChange props:

import React from "react";
import InputMask from "react-input-mask";

export default function App() {
  const [value, setValue] = React.useState("");

  return (
    <div>
      <InputMask
        value={value}
        onChange={e => setValue(e.target.value)}
        mask="+49 999 999 9999"
        maskChar=" "
      />
    </div>
  );
}

We use the onChange callback to set the inputted value as the value of the value state.

And we pass the value state as the value of the value prop.

Conclusion

react-datetime is a date and time picker we can use in our React app.

rc-table is a table component.

react-input-mask is an input mask component.