Top React Libraries — Focus Lock, Toasts, Text Editor, and Day Picker

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-focus-lock

The react-focus-lock package lets us keep the focus of an element.

To install it, we can run:

npm i react-focus-lock

Then we can use it by writing:

import React from "react";
import FocusLock from "react-focus-lock";

export default function App() {
  const onClose = e => console.log(e);

  return (
    <FocusLock>
      <button onClick={onClose}>button</button>
    </FocusLock>
  );
}

We have the FocusLock component to keep the focus on the button.

The options for hos to focus and what component the FocusLock component can be rendered as can be changed.

React-Toastify

The React-Toastify component lets us add toasts to our React app easily.

To install the package, we run:

npm i react-toastify

Then we can use it by writing:

import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

export default function App() {
  const notify = () => toast("toast!");

  return (
    <div>
      <button onClick={notify}>Notify!</button>
      <ToastContainer />
    </div>
  );
}

We import the CSS and the JavaScript module.

Then we can call the toast function to display the toast.

The position, content, update, duration, etc., can all be changed.

React-Ace

The React-Ace is a text editor component that we can add to our React app.

We can install it by running:

npm i react-ace

Then we can use it by writing:

import React from "react";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";

export default function App() {
  function onChange(newValue) {
    console.log("change", newValue);
  }
  return (
    <div>
      <AceEditor
        mode="java"
        theme="github"
        onChange={onChange}
        name="id"
        editorProps={{ $blockScrolling: true }}
      />
    </div>
  );
}

We import the CSS and then we can use the AceEditor component to add the editor.

editorProps has the options for the editor.

We can add listeners for focus, blur, scroll, validate, and more.

The number of lines to display can also be changed.

mode is the language for parsing and code highlighting.

theme has the theme to use to style the editor.

It also comes with the SplitEditor component which can create multiple linked instances of the Ace editor.

Each instance shares a theme and other properties but they have their own value.

For example, we can write:

import React from "react";
import { split as SplitEditor } from "react-ace";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";

export default function App() {
  return (
    <div>
      <SplitEditor
        mode="java"
        theme="github"
        splits={2}
        orientation="below"
        value={["hi", "hello"]}
        name="id"
        editorProps={{ $blockScrolling: true }}
      />
    </div>
  );
}

to add the split editor.

react-day-picker

react-day-picker is a flexible day picker we can use in our React app.

It’s highly customizable, localizable, and it doesn’t require any external dependencies.

To install it, we run:

npm i react-day-picker

Then we can add the day picker with the DayPicker component:

import React from "react";
import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";

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

We can make it a controlled component by passing in the onDayClick and selectedDays props:

import React from "react";
import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";

export default function App() {
  const [selectedDay, setSelectedDay] = React.useState();

  const handleDayClick = day => {
    setSelectedDay(day);
  };

  return (
    <div>
      <DayPicker onDayClick={handleDayClick} selectedDays={selectedDay} />
    </div>
  );
}

onDayClick sets the day selected to the selectedDay state.

selectedDays has the value of the selected day from the selectedDay state.

We can style it and it supports localization.

Conclusion

react-focus-lock lets us set the focus on elements on the app.

React-Toastify lets us display toasts easily.

React-Ace is a text editor.

react-day-picker is a day picker that’s styleable and supports localization.