- Notifications
You must be signed in to change notification settings - Fork1
A flexible clickout handler for React
License
NotificationsYou must be signed in to change notification settings
k2p-ed/react-clickout-handler
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A React component to handle clicking outside of an element.
- 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
ignoredElementsprop - Enable or disable the clickout behavior on the fly with the
enabledprop
yarn add react-clickout-handler
or
npm install --save react-clickout-handler
importReactfrom'react'importClickOutHandlerfrom'react-clickout-handler'constMyComponent=()=>{consthandleClickOut=()=>{console.log('clicked out!')}return(<ClickOutHandleronClickOut={handleClickOut}><divclassName='modal'> This is a modal! Click outside to close it.</div></ClickOutHandler>)}
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
children | `Node | ({ [string]: Ref }) => any` | true | |
enabled | boolean | false | true | Enables or disables the clickout behavior. This can be useful to ensure theonClickOut callback is only executed when you want it to be. |
events | string[] | false | ['mousedown', 'touchstart'] | Allows for specifying custom events to trigger theonClickOut 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 likestyled-components, which requires use ofinnerRef 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 asdiv. If this prop is not provided, theClickOutHandler component will either clone the child element (if single child) or wrap the children in adiv (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. |
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 theignoredElements prop.
importReact,{Component}from'react'importClickOutHandlerfrom'react-clickout-handler'exportdefaultclassMyComponentextendsComponent{state={data:''}handleChange=(data)=>{this.setState({ data})}save=()=>{apiCall(this.state.data)}setRef=(el)=>{this.saveButton=el}render(){return(<divid='my-app'><ClickOutHandlerignoredElements={[this.saveButton]}onClickOut={handleClickOut}><SomeComponentonChange={this.handleChange}/></ClickOutHandler><buttonref={this.setRef}onClick={this.save}> Save</button></div>)}}
ClickOutHandler relies on having a ref to its immediate child. If the child is unable to directly accept aref prop, there are two options:
Use therefProp prop
importReactfrom'react'importClickOutHandlerfrom'react-clickout-handler'importstyledfrom'styled-components'constMyDiv=styled.div` background-color: red; `consthandleClickOut=()=>{console.log('You clicked me!')}constMyComponent=()=>(<ClickOutHandleronClickOut={handleClickOut}refProp='innerRef'><MyDiv/></ClickOutHandler>)
Pass a function as the child
importReactfrom'react'importClickOutHandlerfrom'react-clickout-handler'importstyledfrom'styled-components'constMyDiv=styled.div` background-color: red; `consthandleClickOut=()=>{console.log('You clicked me!')}constMyComponent=()=>(<ClickOutHandleronClickOut={handleClickOut}>{({ ref})=><MyDivinnerRef={ref}/>}</ClickOutHandler>)
MIT
About
A flexible clickout handler for React
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.