react-clickout-handler
A React component to handle clicking outside of an element.
Features
- Wrap a single element or multiple elements to watch for clickout behavior
- Ignore one or more elements (clickout behavior won't be triggered) by adding them to the
ignoredElements
prop - Enable or disable the clickout behavior on the fly with the
enabled
prop
Installation
yarn add react-clickout-handler
or
npm install --save react-clickout-handler
Getting Started
const MyComponent = { const handleClickOut = { console } return <ClickOutHandler onClickOut=handleClickOut> <div className='modal'> This is a modal! Click outside to close it </div> </ClickOutHandler> }
Props
Prop | Type | Required | Default | Description |
---|---|---|---|---|
children |
Node | ({ [string]: Ref }) => any |
true | The element(s) you want to trigger the onClickOut callback when clicked outside of |
|
enabled |
boolean |
false | true |
Enables or disables the clickout behavior. This can be useful to ensure the onClickOut callback is only executed when you want it to be. |
events |
string[] |
false | ['mousedown', 'touchstart'] |
Allows for specifying custom events to trigger the onClickOut callback |
ignoredElements |
Object[] |
false | [] |
An array of refs for elements to exclude from triggering the clickout behavior |
refProp |
string |
false | ref |
Specify a prop name to use for getting a ref to the wrapped component. Useful if you need to get the ref for a "composed" component, or if you're using something like styled-components, which requires use of innerRef to get the ref of a styled component. |
wrapWith |
ElementType |
false | null |
Specify what type of element to wrap the children with. Can be a React component or string such as div . If this prop is not provided, the ClickOutHandler component will either clone the child element (if single child) or wrap the children in a div (if multiple children). |
onClickOut |
(ev: Event) => any |
true | Function to be called when the clickout behavior is triggered. Receives the click event as an argument. |
Examples
Excluding element(s)
If there are any elements outside of your ClickOutHandler component that you do not want to trigger the clickout behavior when clicked, you can pass a ref to the ignoredElements
prop.
state = data: '' { this } { } { thissaveButton = el } { return <div id='my-app'> <ClickOutHandler ignoredElements=thissaveButton onClickOut=handleClickOut > <SomeComponent onChange=thishandleChange /> </ClickOutHandler> <button ref=thissetRef onClick=thissave> Save </button> </div> }
Refs
ClickOutHandler
relies on having a ref to its immediate child. If the child is unable to directly accept a ref
prop, there are two options:
Use the refProp
prop
const MyDiv = styleddiv` background-color: red; ` const handleClickOut = { console } const MyComponent = <ClickOutHandler onClickOut=handleClickOut refProp='innerRef'> <MyDiv /> </ClickOutHandler>
Pass a function as the child
const MyDiv = styleddiv` background-color: red; ` const handleClickOut = { console } const MyComponent = <ClickOutHandler onClickOut=handleClickOut> <MyDiv innerRef=ref /> </ClickOutHandler>
License
MIT