react-overlays

What is react-overlays?

The react-overlays package provides a set of components and utilities for creating overlays, modals, tooltips, and other UI elements that float above the main content. It is designed to be flexible and customizable, making it easy to integrate into various React applications.

What are react-overlays's main functionalities?

Modal

The Modal component allows you to create a modal dialog that can be shown or hidden based on the component's state. The example demonstrates how to toggle the visibility of the modal using a button.

```jsx
import React, { useState } from 'react';
import { Modal } from 'react-overlays';

function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <div>
      <button onClick={handleShow}>Show Modal</button>
      <Modal show={show} onHide={handleClose}>
        <div>
          <h4>Modal Title</h4>
          <button onClick={handleClose}>Close</button>
        </div>
      </Modal>
    </div>
  );
}

export default Example;
```

Tooltip

The Tooltip component, used in conjunction with OverlayTrigger, allows you to display a tooltip when the user hovers over or focuses on an element. The example shows how to attach a tooltip to a button.

```jsx
import React from 'react';
import { OverlayTrigger, Tooltip } from 'react-overlays';

function Example() {
  const renderTooltip = (props) => (
    <Tooltip {...props}>Tooltip content</Tooltip>
  );

  return (
    <OverlayTrigger placement="right" overlay={renderTooltip}>
      <button>Hover me</button>
    </OverlayTrigger>
  );
}

export default Example;
```

Dropdown

The Dropdown component provides a way to create dropdown menus. The example demonstrates a simple dropdown with a toggle button and a menu containing several items.

```jsx
import React from 'react';
import { Dropdown } from 'react-overlays';

function Example() {
  return (
    <Dropdown>
      <Dropdown.Toggle>Dropdown Button</Dropdown.Toggle>
      <Dropdown.Menu>
        <Dropdown.Item eventKey="1">Action</Dropdown.Item>
        <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
        <Dropdown.Item eventKey="3">Something else</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

export default Example;
```

Other packages similar to react-overlays

react-bootstrap

React-Bootstrap is a popular library that provides Bootstrap components as React components. It includes similar functionalities such as modals, tooltips, and dropdowns, but with a design system based on Bootstrap. It is more opinionated in terms of styling compared to react-overlays.

react-modal

React-Modal is a lightweight library focused specifically on creating accessible modals in React. It offers a simpler API for modal creation compared to react-overlays, but does not include other overlay types like tooltips or dropdowns.

react-tooltip

React-Tooltip is a library dedicated to creating tooltips in React. It provides a wide range of customization options for tooltips, making it more specialized for this purpose compared to the more general-purpose react-overlays.

README

react-overlays

Utilities for creating robust overlay components.

Documentation

https://react-bootstrap.github.io/react-overlays

Installation

npm install --save react-overlays

Notes

All of these utilities have been abstracted out of React-Bootstrap in order to provide better access to the generic implementations of these commonly-needed components. The included components are building blocks for creating more polished components. Everything is bring-your-own-styles, CSS or otherwise.

If you are looking for more complete overlays, modals, or tooltips – something you can use out-of-the-box – check out React-Bootstrap, which is built using these components.

Changelog

5.2.1 (2022-09-16)

Bug Fixes

• usePopper: fix exported Modifier type (#1013) (96b3425)

Features

• useRootClose: add support for open shadow roots (#1004) (3b7fb53)