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
; const MyComponent3000 = <Foco onClickOutside= console onFocusOutside= console > <button>Click Me</button> React </Foco>;
Changelog
https://github.com/nanot1m/react-foco/releases
API
Props
onClickOutside
— function called on clicks outside of wrapping nodesonFocusOutside
— function called on focus outside of wrapping nodesrender
— prop allows for inline rendering foco contentclassName
— class passed to wrapping nodestyle
— object with css properties passed to wrapping nodechildren
— children react elements or function the same as proprender
component
— component or tag which is used to render wrapper node
Render Props
This prop are passed for callback in props render or children
className?: string
— class name provided from Foco componentstyle?: React.CSSProperties
— styles provided from Foco componentonMouseDown: React.MouseEventHandler
— handler for checking clicks outsideonFocus: React.FocusEventHandler
— handler for checking focuses outsideonTouchStart: React.TouchEventHandler
— handler for checking touches outside
Render-prop example
{ return <Foco => <div = > <p>Hola! Clicks outside would trigger alerts</p> </div> </Foco> ;}
Development
Tests
- run storybook:
yarn storybook
- run tests:
yarn test