Top React Libraries — Tooltips, Dialogs, and Cookies

Photo by Anh Nguyen on Unsplash

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"…