https://github.com/nanot1m/react-foco
React component for handling clicks and focuses outside, which works with portals
https://github.com/nanot1m/react-foco
clickoutside focusoutside portal react
Last synced: about 1 year ago
JSON representation
React component for handling clicks and focuses outside, which works with portals
- Host: GitHub
- URL: https://github.com/nanot1m/react-foco
- Owner: nanot1m
- License: mit
- Created: 2018-04-30T05:59:00.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-10-31T01:22:03.000Z (over 1 year ago)
- Last Synced: 2025-03-29T08:04:35.507Z (over 1 year ago)
- Topics: clickoutside, focusoutside, portal, react
- Language: TypeScript
- Homepage: https://nanot1m.github.io/react-foco/
- Size: 1.98 MB
- Stars: 54
- Watchers: 5
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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 = () => (
console.log('Click Outside')}
onFocusOutside={() => console.log('Focus Outside')}
>
Click Me
{React.createPortal(, portalNode)}
);
```
[Demo](https://codesandbox.io/s/wy8n9koxo7)
## 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
```jsx
function MyComponent() {
return (
alert('click out')}>
{wrapperProps => (
Hola! Clicks outside would trigger alerts
)}
);
}
```
## Development
### Tests
- run storybook: `yarn storybook`
- run tests: `yarn test`