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


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 i react-dismissable-layers

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

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(() => {
  }, [])

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