Nested & Auto-dismissable Layers In React

React Context and hook to add support for nested, auto-dismissable layers. State can be globally controlled through context.

How to use it:

1. Install the component with NPM.

# Yarn
$ yarn add react-dismissable-layers

# NPM
$ npm i react-dismissable-layers --save

2. React hook.

import { useDismissable } from 'react-dismissable-layers';

const Component = () => {
  const [open, toggleOpen] = useDismissable(false);
  return <div>
    <button onClick={toggleOpen}>Open Tooltip</button>
    {open && (
      <Popper>
        Tooltip Content
      </Popper>
    )}
  </div>
}

3. React context.

import { DismissableLayerContext } from 'react-dismissable-layers';

const OtherComponent = () => {
  const dismissOverlay = React.useContext(DismissableLayerContext);
  const close = React.useCallback(() => {
    dismissOverlay.dismissAllGlobally();
  }, [])
  return <button onClick={close}>Close All</button>
}

4. Default options for the useDismissable hook.

/**
 * ref for the popper content, to do not close on the content's [dismissEvent] action
 */
ref?: RefObject<Element>;
/**
 * callback which will be invoked when the popper is closed
 */
onClose?: null | VoidFunction;
/**
 * event on which popper will be closed, default is `'click'`
 */
dismissEvent?: DismissEventType;
/**
 * the popper will be closed just by the [dismissEvent] action, without any layers logic, default is `false`
 */
disableLayers?: boolean;
/**
 * do not close on default prevented events, default is `true`
 */
skipDefaultPrevented?: boolean;

Preview:

Download Details:

Author: voiceflow

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/voiceflow/react-dismissable-layers

License: MIT