nanot1m/react-foco

React component for handling clicks and focuses outside, which works with portals

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

Demo

Changelog

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

API

Props

• 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

Render Props

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

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