Create Nested Dismiss-able context and hook with layers For React


Category: React React Others | July 14, 2021
Author:voiceflow
Official Page:Go to website
Last Update:July 14, 2021
License:MIT

react dismissable layer

Description:

react-dismissable-layers library gives you the flexibility to create React context and hooks to add support for nested and auto dismiss-able layers in your application and the state can be controlled globally using context.

How to install and use it?

1. Install the library using npm or yarn.

#npm
npm i react-dismissable-layers

#yarn
yarn add react-dismissable-layers

2. Import the component.

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

3. React hook to associate different toggle-able components.

// open and close
const Component = () => {
  const [open, toggleOpen] = useDismissable(false);

  return <div>
    <button onClick={toggleOpen}>Open Tooltip</button>
    {open && (
      <Popper>
        Tooltip Content
      </Popper>
    )}
  </div>
}

4. React context.

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

// close all dismissibles in context
const OtherComponent = () => {
  const dismissOverlay = React.useContext(DismissableLayerContext);

  const close = React.useCallback(() => {
    dismissOverlay.dismissAllGlobally();
  }, [])

  return <button onClick={close}>Close All</button>
}