Contents
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.