{"id":19409124,"url":"https://github.com/nanot1m/react-foco","last_synced_at":"2025-04-05T09:05:03.909Z","repository":{"id":53109374,"uuid":"131561108","full_name":"nanot1m/react-foco","owner":"nanot1m","description":"React component for handling clicks and focuses outside, which works with portals","archived":false,"fork":false,"pushed_at":"2024-10-31T01:22:03.000Z","size":2077,"stargazers_count":54,"open_issues_count":2,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T08:04:35.507Z","etag":null,"topics":["clickoutside","focusoutside","portal","react"],"latest_commit_sha":null,"homepage":"https://nanot1m.github.io/react-foco/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nanot1m.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-30T05:59:00.000Z","updated_at":"2024-09-30T15:21:54.000Z","dependencies_parsed_at":"2024-06-18T18:23:00.599Z","dependency_job_id":"c84219c1-da9a-4bdf-bb97-d7a90b9a14ec","html_url":"https://github.com/nanot1m/react-foco","commit_stats":{"total_commits":40,"total_committers":5,"mean_commits":8.0,"dds":0.625,"last_synced_commit":"08bae9b164767544eebff525c3603686813a8658"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanot1m%2Freact-foco","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanot1m%2Freact-foco/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanot1m%2Freact-foco/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanot1m%2Freact-foco/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nanot1m","download_url":"https://codeload.github.com/nanot1m/react-foco/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312077,"owners_count":20918344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clickoutside","focusoutside","portal","react"],"created_at":"2024-11-10T12:09:47.828Z","updated_at":"2025-04-05T09:05:03.797Z","avatar_url":"https://github.com/nanot1m.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-foco\n\nReact component for handling clicks and focuses outside\n\n- Handles clicks and **focuses** outside\n- Takes care of children rendered in **react portals**\n- **Small** — less then 600b minified and gzipped, has no dependencies\n- TypeScript friendly\n\n```javascript\nimport Foco from 'react-foco';\n\nconst MyComponent3000 = () =\u003e (\n  \u003cFoco\n    onClickOutside={() =\u003e console.log('Click Outside')}\n    onFocusOutside={() =\u003e console.log('Focus Outside')}\n  \u003e\n    \u003cbutton\u003eClick Me\u003c/button\u003e\n    {React.createPortal(\u003cMyAnotherComponent /\u003e, portalNode)}\n  \u003c/Foco\u003e\n);\n```\n\n[Demo](https://codesandbox.io/s/wy8n9koxo7)\n\n## Changelog\n\nhttps://github.com/nanot1m/react-foco/releases\n\n## API\n\n### Props\n\n- `onClickOutside` — function called on clicks outside of wrapping nodes\n- `onFocusOutside` — function called on focus outside of wrapping nodes\n- `render` — prop allows for inline rendering foco content\n- `className` — class passed to wrapping node\n- `style` — object with css properties passed to wrapping node\n- `children` — children react elements or function the same as prop `render`\n- `component` — component or tag which is used to render wrapper node\n\n### Render Props\n\nThis prop are passed for callback in props render or children\n\n- `className?: string` — class name provided from Foco component\n- `style?: React.CSSProperties` — styles provided from Foco component\n- `onMouseDown: React.MouseEventHandler` — handler for checking clicks outside\n- `onFocus: React.FocusEventHandler` — handler for checking focuses outside\n- `onTouchStart: React.TouchEventHandler` — handler for checking touches outside\n\n### Render-prop example\n\n```jsx\nfunction MyComponent() {\n  return (\n    \u003cFoco onClickOutside={() =\u003e alert('click out')}\u003e\n      {wrapperProps =\u003e (\n        \u003cdiv\n          {...wrapperProps}\n          style={{ border: '1px solid skyblue', textAlign: 'center' }}\n        \u003e\n          \u003cp\u003eHola! Clicks outside would trigger alerts\u003c/p\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/Foco\u003e\n  );\n}\n```\n\n## Development\n\n### Tests\n\n- run storybook: `yarn storybook`\n- run tests: `yarn test`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnanot1m%2Freact-foco","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnanot1m%2Freact-foco","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnanot1m%2Freact-foco/lists"}