react-foco

React component for handling clicks and focuses outside

- Handles clicks and focuses outside
- Takes care of children rendered in react portals
- Small — less then 600b minified and gzipped, has no dependencies
- TypeScript friendly

``javascript
import Foco from 'react-foco';

const MyComponent3000 = () => (
onClickOutside={() => console.log('Click Outside')}
onFocusOutside={() => console.log('Focus Outside')}
>
Click Me
{React.createPortal(, portalNode)}

);
`

Demo

Changelog

https://github.com/nanot1m/react-foco/releases

API

$3

- onClickOutside — function called on clicks outside of wrapping nodes
- onFocusOutside — function called on focus outside of wrapping nodes
- render — prop allows for inline rendering foco content
- className — class passed to wrapping node
- style — object with css properties passed to wrapping node
- children — children react elements or function the same as prop render
- component — component or tag which is used to render wrapper node

$3

This prop are passed for callback in props render or children

- className?: string — class name provided from Foco component
- style?: React.CSSProperties — styles provided from Foco component
- onMouseDown: React.MouseEventHandler — handler for checking clicks outside
- onFocus: React.FocusEventHandler — handler for checking focuses outside
- onTouchStart: React.TouchEventHandler — handler for checking touches outside

$3

`jsx
function MyComponent() {
return (
alert('click out')}>
{wrapperProps => (
{...wrapperProps}
style={{ border: '1px solid skyblue', textAlign: 'center' }}
>


Hola! Clicks outside would trigger alerts