react-overlays

  • Version 5.1.1
  • Published
  • 245 kB
  • 8 dependencies
  • MIT license

Install

npm i react-overlays
yarn add react-overlays
pnpm add react-overlays

Overview

Utilities for creating robust overlay components

Index

Variables

const Modal: any;

    variable Overlay

    const Overlay: any;
    • Built on top of Popper.js, the overlay component is great for custom tooltip overlays.

    variable Portal

    const Portal: {
    ({ container, children, onRendered }: PortalProps): JSX.Element | null;
    displayName: string;
    propTypes: { container: any; onRendered: any };
    };
    • Modifiers

      • @public

    Functions

    Dropdown: typeof Dropdown;
    • Dropdown

      Modifiers

      • @public

    function useDropdownMenu

    useDropdownMenu: (
    options?: UseDropdownMenuOptions
    ) => readonly [UserDropdownMenuProps, UseDropdownMenuMetadata];
    • Dropdown

      Parameter options

      Parameter

      {boolean} options.flip Automatically adjust the menu drop position based on viewport edge detection

      Parameter

      {[number, number]} options.offset Define an offset distance between the Menu and the Toggle

      Parameter

      {boolean} options.show Display the menu manually, ignored in the context of a Dropdown

      Parameter

      {boolean} options.usePopper opt in/out of using PopperJS to position menus. When disabled you must position it yourself.

      Parameter

      {string} options.rootCloseEvent The pointer event to listen for when determining "clicks outside" the menu for triggering a close.

      Parameter

      {object} options.popperConfig Options passed to the [usePopper](/api/usePopper) hook.

    function useDropdownToggle

    useDropdownToggle: () => [UseDropdownToggleProps, UseDropdownToggleMetadata];
    • Wires up Dropdown toggle functionality, returning a set a props to attach to the element that functions as the dropdown toggle (generally a button).

      Dropdown

    function useRootClose

    useRootClose: (
    ref: React.RefObject<Element> | Element | null | undefined,
    onRootClose: (e: Event) => void,
    { disabled, clickTrigger }?: RootCloseOptions
    ) => void;
    • The useRootClose hook registers your callback on the document when rendered. Powers the <Overlay/> component. This is used achieve modal style behavior where your callback is triggered when the user tries to interact with the rest of the document or hits the esc key.

      Parameter ref

      The element boundary

      Parameter onRootClose

      Parameter options

      Parameter

      {boolean=} options.disabled

      Parameter

      {string=} options.clickTrigger The DOM event name (click, mousedown, etc) to attach listeners on

    Namespaces

    namespace Dropdown {}
      var displayName: string;
        var Menu: typeof DropdownMenu;
          var propTypes: {
          children: any;
          drop: any;
          focusFirstItemOnShow: any;
          itemSelector: any;
          alignEnd: any;
          show: any;
          defaultShow: any;
          onToggle: any;
          };
            var Toggle: typeof DropdownToggle;

              Package Files (8)

              Dependencies (8)

              Dev Dependencies (0)

              No dev dependencies.

              Peer Dependencies (2)

              Badge

              To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

              You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-overlays.

              • Markdown
                [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-overlays)
              • HTML
                <a href="https://www.jsdocs.io/package/react-overlays"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>