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
import Foco from 'react-foco';
const MyComponent3000 = () => (
<Foco
onClickOutside={() => console.log('Click Outside')}
onFocusOutside={() => console.log('Focus Outside')}
>
<button>Click Me</button>
{React.createPortal(<MyAnotherComponent />, portalNode)}
</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
function MyComponent() {
return (
<Foco onClickOutside={() => alert('click out')}>
{wrapperProps => (
<div
{...wrapperProps}
style={{ border: '1px solid skyblue', textAlign: 'center' }}
>
<p>Hola! Clicks outside would trigger alerts</p>
</div>
)}
</Foco>
);
}
Development
Tests
- run storybook:
yarn storybook
- run tests:
yarn test