{"id":16482643,"url":"https://github.com/mfix22/actionsack","last_synced_at":"2025-03-21T07:30:50.212Z","repository":{"id":35055121,"uuid":"201331331","full_name":"mfix22/actionsack","owner":"mfix22","description":"🎒React UX components for handling common interactions","archived":false,"fork":false,"pushed_at":"2023-01-27T04:30:21.000Z","size":3753,"stargazers_count":12,"open_issues_count":6,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-12T13:11:29.624Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/mfix22.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-08T20:19:47.000Z","updated_at":"2024-06-18T09:44:21.000Z","dependencies_parsed_at":"2023-02-15T05:15:40.916Z","dependency_job_id":null,"html_url":"https://github.com/mfix22/actionsack","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfix22%2Factionsack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfix22%2Factionsack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfix22%2Factionsack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfix22%2Factionsack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfix22","download_url":"https://codeload.github.com/mfix22/actionsack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221812691,"owners_count":16884682,"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":[],"created_at":"2024-10-11T13:11:31.546Z","updated_at":"2024-10-28T09:34:32.901Z","avatar_url":"https://github.com/mfix22.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Action Sack 🎒\n\n\u003e Collection of React user-experience hooks + containers for common interactions\n\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n\n## Getting Started\n\n```bash\nyarn add actionsack\n```\n\n## Usage\n\n### `useAsyncCallback`\n\n\u003e 🎣 `hook`\n\nTakes any function and gives you a loading and error state. Good for handling\ngeneral asynchronous interactions.\n\n```js\nimport { useAsyncCallback } from 'actionsack'\n\nfunction MyAsyncButton(props) {\n  const [onClick, { loading, error, data }] = useAsyncCallback(props.onClick)\n\n  return (\n    \u003c\u003e\n      {error \u0026\u0026 \u003cspan\u003e{error}!\u003c/span\u003e}\n      \u003cbutton onClick={onClick}\u003e{loading ? 'Saving...' : 'Save'}\u003c/button\u003e\n      {data \u0026\u0026 \u003cspan\u003eSuccess! {data}\u003c/span\u003e}\n    \u003c/\u003e\n  )\n}\n```\n\n### `useKeyboardListener`\n\n\u003e 🎣 `hook`\n\nPass it a keyboard key and a handler to automatically listen for keyboard clicks.\n\n##### Example\n\n```js\nimport { useKeyboardListener } from 'actionsack'\n\nfunction Modal(props) {\n  useKeyboardListener('Escape', props.onClose)\n\n  return \u003cdiv\u003eHello World\u003c/div\u003e\n}\n```\n\n### `useTempValue`\n\n\u003e `hook` 🎣\n\nHook that gives you a temporary state value that you can either commit with `submit` or revert with `reset`.\n\n##### Example\n\n```javascript\nimport { useTempValue } from 'actionsack'\n\nfunction MyForm(props) {\n  const initialName = props.name\n  const { hasChanged, value, onInputChange, submit, reset } = useTempValue(initialName)\n\n  return (\n    \u003cform onSubmit={e =\u003e e.preventDefault()}\u003e\n      \u003cinput value={value || ''} onChange={onInputChange} /\u003e\n      \u003cbutton disabled={!hasChanged} onClick={submit}\u003e\n        Submit\n      \u003c/button\u003e\n      \u003cbutton disabled={!hasChanged} onClick={reset}\u003e\n        Cancel\n      \u003c/button\u003e\n    \u003c/form\u003e\n  )\n}\n```\n\n### `useCopyTextHandler`\n\n\u003e `hook` 🎣\n\nCreates an `onClick` handler that copies the text you pass in, and updates the `copied` field accordingly.\n**Note**: you must pass `onClick` to a `\u003cbutton\u003e` in order to copy the text.\n\nFor more information about `options`, see [API](https://github.com/sudodoki/copy-to-clipboard#api).\n\n##### Example\n\n```javascript\nimport { useCopyTextHandler } from 'actionsack'\n\nconst options = {\n  interval: 2 * 1000, // 2 seconds\n  format: \"text/html\",\n}\n\nfunction MyCopyButton() {\n  const { onClick, copied } = useCopyTextHandler('https://github.com/mfix22/actionsack', options)\n\n  return \u003cbutton onClick={onClick}\u003e{copied ? 'COPIED!' : 'Copy URL'}\u003c/button\u003e\n}\n```\n\n### `useOnline`\n\n\u003e `hook` 🎣\n\nSubscribes to whether the network is online or off\n\n##### Example\n\n```javascript\nimport { useOnline } from 'actionsack'\n\nfunction MyComponent() {\n  const online = useOnline()\n  return \u003cspan\u003eYou are {online ? 'online' : 'offline'}\u003c/span\u003e\n}\n```\n\n### `TimeWindow`\n\nShow children after a certain amount of time, for a certain amount of time.\n\n##### Example\n\n```js\nimport { TimeWindow } from 'actionsack'\n\nfunction MyMessage() {\n  return (\n    \u003cTimeWindow showAfter={3000} showUntil={6000}\u003e\n      Timed Message!\n    \u003c/TimeWindow\u003e\n  )\n}\n```\n\n### `Modal`\n\n\u003e `wrapper HOC` component\n\nClass controlled Modal component with click-away and ESC-key to close\n\n##### Example\n\n```javascript\nimport {Modal} from 'actionsack'\n\n\u003cModal open={this.state.open} onClickAway={() =\u003e this.setState({ open: false})}\u003e\n  \u003cform\u003e\n    \u003cinput placeholder=\"Enter name here . . .\" /\u003e\n  \u003c/form\u003e\n\u003c/\u003e\n```\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfix22%2Factionsack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfix22%2Factionsack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfix22%2Factionsack/lists"}