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

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>
}

The post Create Nested Dismiss-able context and hook with layers For React appeared first on Lipku.com.

Leave a Reply

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