react-clickout-ts

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-ts

or

  npm install --save react-clickout-ts

BREAKING CHANGES: V 1.2.2

• Replace import ClickOutHandler from "react-clickout-ts" with import { ClickOutHandler } from "react-clickout-ts";

Getting Started

import React from 'react'
import { ClickOutHandler } from 'react-clickout-ts'

const MyComponent = () => {
  const handleClickOut = () => {
    console.log('clicked out!')
  }

  return (
    <ClickOutHandler onClickOut={handleClickOut}>
      <div className='modal'>This is a modal! Click outside to close it.</div>
    </ClickOutHandler>
  )
}

Props

Props

| Prop | Type | Required | Default | Description | |-------------------|----------------------------------------------|----------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | children | ReactNode | 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 | | 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.

import { useRef, useState } from 'react'
import { ClickOutHandler } from 'react-clickout-ts'

const Component = () => {
  const ignoreRef = useRef<HTMLElement | null>(null)
  const handleClickOutside = (ev: Event) => {
    console.log('Clicked outside')
  }

  return (
    <div>
      <div ref={ignoreRef}>This should be ignored!</div>
      <ClickOutHandler ignoredElements={[ignoreRef.current]} onClickOut={handleClickOutside}>
        <div>Content goes here</div>
      </ClickOutHandler>
    </div>
  )
}

License

MIT