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 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 && (
        Tooltip Content

3. React context.

import { DismissableLayerContext } from 'react-dismissable-layers';
const OtherComponent = () => {
  const dismissOverlay = React.useContext(DismissableLayerContext);
  const close = React.useCallback(() => {
  }, [])
  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;


Nested & Auto-dismissable Layers In React

Download Details:

Author: voiceflow

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

Source link

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top