react-overlays

Variables

• Modal
• Overlay
• Portal

Functions

• Dropdown()
• useDropdownMenu()
• useDropdownToggle()
• useRootClose()

Namespaces

• Dropdown

  • displayName
  • Menu
  • propTypes
  • Toggle

variable Modal

const Modal: any;

variable Overlay

const Overlay: React.ForwardRefExoticComponent<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: PropTypes.Requireable<any>;
        onRendered: PropTypes.Requireable<(...args: any[]) => any>;
    };
};

• Modifiers

  • @public

function Dropdown

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