React-clickout-ts NPM

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

  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

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>
  )
}