Top React Libraries — Tooltip, Clipboard, Dates, and Portal

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

react-tooltip is an easy to use tooltip component.

To install it, we can run:

npm i react-tooltip

Then we can use it by writing:

import React from "react";
import ReactTooltip from "react-tooltip";

export default function App() {
  return (
    <>
      <p data-tip="hello world">Tooltip</p>
      <ReactTooltip />
    </>
  );
}

We add an element with the data-tip attribute with the value being the text that we want to display in the tooltip.

Then we add the ReactTooltip component.

This will display the text in the tooltip when we hover it.

We can change many other things like offsets, delays, borders, arrow colors, and much more.

react-copy-to-clipboard

react-copy-to-clipboard is a package that lets us copy things to the clipboard easier when the user does something our React app.

To install it, we can write:

npm i react-copy-to-clipboard

Then we can use it by writing:

import React from "react";
import { CopyToClipboard } from "react-copy-to-clipboard";

export default function App() {
  const [value, setValue] = React.useState("");
  const [copied, setCopied] = React.useState(false);
  return (
    <>
      <div>
        <input
          value={value}
          onChange={({ target: { value } }) => setValue(value)}
        />

        <CopyToClipboard text={value} onCopy={() => setCopied(true)}>
          <span>Copy to clipboard with span</span>
        </CopyToClipboard>

        <CopyToClipboard text={value} onCopy={() => setCopied(true)}>
          <button>Copy to clipboard with button</button>
        </CopyToClipboard>

{copied ? <span style={{ color: "red" }}>Copied.</span> : null}
      </div>
    </>
  );
}

We have the CopyToClipboard component which surrounds the component that we to let user use to copy content to the clipboard.

The text prop has the values that we want to let the user copy to the clipboard.

React-portal

React-portal is a package that lets us use the React portal feature easily.

It lets us render our component as a child of any element we want.

We can install it by running:

npm i react-portal

Then we can use it by writing:

import React from "react";
import { Portal } from "react-portal";

export default function App() {
  return (
    <>
      <Portal>This text is portaled at the end of document.body!</Portal>

      <Portal node={document && document.getElementById("foo")}>
        This text is portaled into foo
      </Portal>
    </>
  );
}

We use the Portal component to render our content in the location we want in the DOM.

If there’s node prop, then it’s rendered in the body.

Otherwise, it’s rendered in the element that we specified.

react-dates

react-dates is a date picker library for our React app.

To install it, we can run:

npm i react-dates

Then we can use it by writing:

import React from "react";
import { DateRangePicker } from "react-dates";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";

export default function App() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);
  const [focusedInput, setFocusedInput] = React.useState(null);
  return (
    <>
      <DateRangePicker
        startDateId="startDate"
        endDateId="endDate"
        startDate={startDate}
        endDate={endDate}
        onDatesChange={({ startDate, endDate }) => {
          setStartDate(startDate);
          setEndDate(endDate);
        }}
        focusedInput={focusedInput}
        onFocusChange={focusedInput => {
          setFocusedInput(focusedInput);
        }}
      />
    </>
  );
}

We have the startDateId to set the name of the start date field.

We do the same with the end date with the endDateId

startDate has the value of the start date.

endDate has the end date value.

onDatesChange has a function that updates the state of the start date.

focusedInput has the input that’s focused.

onFocusChange has the function to set which date input is focused.

We also have to import the initialize module and the CSS to make the pickers display properly.

Conclusion

react-tooltip lets us add a tooltip easily.

react-copy-to-clipboard lets us add a copy to clipboard feature in our React app.

React-portal has makes using the portal feature easy.

react-dates lets us add a start and end date picker.