react-onclick-toggle-display

Wrap content with this component and toggle It depending on click's location.

Getting Started

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.

Installation

For installing this component:

npm install react-onclick-toggle-display

Props and explanation

| 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 | | preventInsideOfElements | Just like preventFromCloseElements. However, also contained nodes of those with a certain id or class won't hide the content when clicked inside | Array | | 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 |