Top React Libraries — Tooltips, Dialogs, and Cookies

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 library to let us add a tooltip to our app.

To install it, we run:

npm i react-popper-tooltip

Then we can use it by writing:

import React from "react";
import TooltipTrigger from "react-popper-tooltip";
import "react-popper-tooltip/dist/styles.css";

const Tooltip = ({
  arrowRef,
  tooltipRef,
  getArrowProps,
  getTooltipProps,
  placement
}) => (
  <div
    {...getTooltipProps({
      ref: tooltipRef,
      className: "tooltip-container"
    })}
  >
    <div
      {...getArrowProps({
        ref: arrowRef,
        className: "tooltip-arrow",
        "data-placement": placement
      })}
    />
    Hello, World
  </div>
);

const Trigger = ({ getTriggerProps, triggerRef }) => (
  <span
    {...getTriggerProps({
      ref: triggerRef,
      className: "trigger"
    })}
  >
    Click Me
  </span>
);

export default function App() {
  return (
    <div className="App">
      <TooltipTrigger placement="right" trigger="click" tooltip={Tooltip}>
        {Trigger}
      </TooltipTrigger>
    </div>
  );
}

We import the CSS so that we see some styles in our tooltips.

Then we add the Tooltip component to ley us display the tooltip.

It takes several props including some refs for the arrow and tooltip.

Also, there’s one prop to let us set the tooltip placement to be beside the trigger element which we expect.

The content of the tooltip is also in the same component.

Trigger is a component that lets us trigger the tooltip.

It’s passed in as the child of the TooltipTrigger component.

This lets us set the placement with the placement prop and the event that triggers the tooltip with the trigger prop.

We can configure how the tooltip is triggered with the components that this package comes with.

rc-dialog

rc-dialog is a React package to let us add a dialog easily in our app.

To install it, we run:

npm i rc-dialog

Then we can use it by writing:

import React from "react";
import "rc-dialog/assets/bootstrap.css";
const Dialog = require("rc-dialog");

export default function App() {
  const [visible, setVisible] = React.useState(false);

  const onClose = () => setVisible(false);

  return (
    <div className="App">
      <button onClick={() => setVisible(true)}>open</button>
      <Dialog
        visible={visible}
        animation="slide-fade"
        maskAnimation="fade"
        title="hello world"
        onClose={onClose}
      >
        <p>first dialog</p>
      </Dialog>
    </div>
  );
}

We import the styles with the dialog.

Then in the App component, we have a button to open the dialog box.

When we click the button, we set the visible state to true .

Then we have the Dialog component.

We set the visible prop to the visible state.

animation has the animation we want to show when we open the dialoh.

maskAnimation is set to fade as the mask animation’s class name.

title has the dialog title.

onClose has a function that runs when we click the ‘x’ or when we click away from the dialog to close it.

The content of the dialog is between the tags.

It also supports many other options like disabling closing, enable or disable closing with the keyboard, the icon for the close button, and more.

react-cookie

react-cookie is an easy to use package for managing client-side cookies in a React app.

To use it, we install it by running:

npm i react-cookie

Then we can use it by writing:

import React, { useEffect } from "react";
import { useCookies } from "react-cookie";

export default function App() {
  const [cookies, setCookie] = useCookies(["name"]);

  useEffect(() => {
    setCookie("name", "mary", { path: "/" });
  }, []);

  return <div>{cookies.name && <h1>Hello {cookies.name}!</h1>}</div>;
}

It comes with the useCookies hook which takes an array with the cookie keys we want to get.

It returns the cookies state with the cookie keys and values.

And it returns the setCookie function to let us set cookies.

It takes the key as the first argument.

The value is the second argument.

The 3rd argument has additional parameters that we can set for the cookies like the path and expiry.

There’re also functions to remove cookies, and it comes with the withCookies higher-order component to let us access cookies data and functions via props.

We can get, set, and remove cookie values.

Server-side rendering is also supported.

Conclusion

React Tooltip is an easy to use package for displaying tooltips.

rc-dialog lets us add dialog boxes in our app.

react-cookie lets us manage client-side cookies with ease.