React component for handling clicks and focuses outside, which works with portals
npm install react-focoReact 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 = () => (
onFocusOutside={() => console.log('Focus Outside')}
>
{React.createPortal(
);
`
https://github.com/nanot1m/react-foco/releases
- 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 prop rendercomponent
- — component or tag which is used to render wrapper node
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
` Hola! Clicks outside would trigger alertsjsx
function MyComponent() {
return (
{wrapperProps => (
{...wrapperProps}
style={{ border: '1px solid skyblue', textAlign: 'center' }}
>
Development
$3
- run storybook:
yarn storybook
- run tests: yarn test`