Wrap content with this component and toggle It depending on click's location.
OnClickToggleDisplay is a component for toggling any react component's display. The default functionality is simple: The children components of will not be shown unless you press the "openerNode" The openerNode prop is the button (It can be any kind of react component actually) that will make the children component display. This button will be shown by default. Once the children component is shown, OnClickToggleDisplay will detect the user's click and if the click is outside the children components, then the content will be hidden. If the user clicks inside the children component, then It will keep being displayed.
For installing this component:
npm install react-onclick-toggle-display
| Prop | how It works | kind |
|---|---|---|
| openerNode (required) | Node that will work as a button. If you click this node, the content will be shown | Node |
| preventFromCloseElements | You should pass an array of strings. When the user clicks on a node with one of these, then the content will not hide (even if It is outside the children component) | Array |
| checkInnerNodes | True if we want to also check for the inner elements of the passed class or ids passed in "preventFromCloseElements" prop | Boolean |
| closeFromInsideElements | You should pass an array of strings. When the user clicks on a node with one of these, then the content will hide (even if It is inside the children component) | Array |
| onOpening | function to be fired when the content is shown | Array |