Top React Libraries — Date Picker, Rich Text Editor, and Pagination

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

rc-calendar is a date picker library.

To install it, we run:

npm i rc-calendar

Then we can use it by writing:

import React from "react";
import Calendar from "rc-calendar";
import "rc-calendar/assets/index.css";

export default class App extends React.Component {
  state = {
    mode: "date",
    rangeStartMode: "date",
    rangeEndMode: "date"
  };

  handlePanelChange = (...args) => {
    console.log("on panel change", ...args);
  };

  render() {
    return (
      <div style={{ zIndex: 1000, position: "relative" }}>
        <Calendar
          mode={this.state.mode}
          onPanelChange={this.handlePanelChange}
        />
      </div>
    );
  }
}

We use the Calendar component to add a date picker.

The mode can also be 'time', 'decade', 'month' or 'year' to let us pick the month or year to let us select those.

Also, we can use the RangeCalendar component to let us select a date range:

import React from "react";
import RangeCalendar from "rc-calendar/lib/RangeCalendar";
import "rc-calendar/assets/index.css";

export default class App extends React.Component {
  state = {
    mode: "date",
    rangeStartMode: "date",
    rangeEndMode: "date"
  };

  handleRangePanelChange = (...args) => {
    console.log("on panel change", ...args);
  };

  render() {
    return (
      <div style={{ zIndex: 1000, position: "relative" }}>
        <RangeCalendar
          mode={[this.state.rangeStartMode, this.state.rangeEndMode]}
          onPanelChange={this.handleRangePanelChange}
        />
      </div>
    );
  }
}

We switched to the RangeCalendar component to get a date range picker.

mode is an array with the mode for picking the start and end range.

The options for those are the same as the Calendar .

There’re many other choices for configuring the calendar.

We can change styles, set the locale, render the date our way, and more.

react-paginate

We can use the react-paginate package to let us add a pagination links container in our app.

To install it, we can run:

npm i react-paginate

Then we can use it by writing:

import React from "react";
import ReactPaginate from "react-paginate";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      offset: 0
    };
  }

  componentDidMount() {}

  handlePageClick = data => {
    let selected = data.selected;
    let offset = Math.ceil(selected * this.props.perPage);

    this.setState({ offset });
  };

  render() {
    return (
      <div className="commentBox">
        <ReactPaginate
          previousLabel={"previous"}
          nextLabel={"next"}
          breakLabel={"..."}
          breakClassName={"break"}
          pageCount={this.state.pageCount}
          marginPagesDisplayed={2}
          pageRangeDisplayed={5}
          onPageChange={this.handlePageClick}
          containerClassName={"pagination"}
          subContainerClassName={"pages pagination"}
          activeClassName={"active"}
        />
      </div>
    );
  }
}

We have the ReactPagination component to display a pagination bar with some props.

previousLabel is the text for the previous page link.

nextLabel is the text for the next page link.

breakLabel is the text for the break to skip page numbers.

breakClassName is the class name for the break.

pageCount is the prop for the page count.

marginPagesDisplayed is the number of pages to display for margins.

pageRangeDisplayed is the range of pages to display.

onPageChange is a function we run when we click on a page link.

containerClassName is the class name for the container.

subContainerClassName is the class name for the child container.

activeClassName is the class for the active link.

It comes with no styles, so we can add the styles we want to style them our way.

React-Quill

React-Quill is an easy to use text editor package for React apps.

To install it, we run:

npm i react-quill

Then we can use it by writing:

import React from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: "" };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value) {
    this.setState({ text: value });
  }

  render() {
    return <ReactQuill value={this.state.text} onChange={this.handleChange} />;
  }
}

The ReactQuill component is used to add the rich text editor.

It takes a value prop that’s set to the text state.

onChange updates the state with the inputted value with the handleChange method.

We also need the CSS to display the text editor properly.

It supports all the things that a normal text editor has include bolding, italics, underline, lists, links, and more.

The toolbar and editing area can be customized.

Conclusion

The rc-calendar can be used to add a date or time pickers.

react-paginate lets us add pagination links to our app.

And React-Quill is a rich text editor made to React with various customization choices.