{"id":13464317,"url":"https://github.com/hermanya/create-react-hook","last_synced_at":"2025-04-04T07:09:24.044Z","repository":{"id":37686613,"uuid":"167879381","full_name":"Hermanya/create-react-hook","owner":"Hermanya","description":"🎣CLI for easily creating reusable react hooks.","archived":false,"fork":false,"pushed_at":"2023-09-10T15:25:11.000Z","size":5295,"stargazers_count":385,"open_issues_count":12,"forks_count":24,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-28T06:07:13.425Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hermanya.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"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},"funding":{"github":"hermanya","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-01-28T01:22:03.000Z","updated_at":"2024-09-12T18:36:41.000Z","dependencies_parsed_at":"2024-06-19T00:20:18.770Z","dependency_job_id":"c637c166-c433-4eea-862f-da480a49da07","html_url":"https://github.com/Hermanya/create-react-hook","commit_stats":{"total_commits":229,"total_committers":25,"mean_commits":9.16,"dds":0.4585152838427947,"last_synced_commit":"87ffcbe3d7b34c0632bc85a10fac1f2b4e28e1d3"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hermanya%2Fcreate-react-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hermanya%2Fcreate-react-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hermanya%2Fcreate-react-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hermanya%2Fcreate-react-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hermanya","download_url":"https://codeload.github.com/Hermanya/create-react-hook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135146,"owners_count":20889421,"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-07-31T14:00:39.930Z","updated_at":"2025-04-04T07:09:24.028Z","avatar_url":"https://github.com/Hermanya.png","language":"JavaScript","funding_links":["https://github.com/sponsors/hermanya"],"categories":["License"],"sub_categories":["useDataApi"],"readme":"# create-react-hook\n\n\u003e CLI for creating reusable React hooks using Rollup and create-react-app.\n\u003e Inspired by the amazing [create-react-library](https://github.com/transitive-bullshit/create-react-library)\n\n[![NPM](https://img.shields.io/npm/v/create-react-hook.svg)](https://www.npmjs.com/package/create-react-hook) [![Build Status](https://travis-ci.com/hermanya/create-react-hook.svg?branch=master)](https://travis-ci.com/hermanya/create-react-hook) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n[How and why I made this tool.](https://medium.com/@Hermanhasawish/how-to-create-a-reusable-react-hook-9e42e73b2f9a)\n\n## Features\n\n- Easy-to-use CLI\n- Handles all modern JS features\n- Bundles `cjs` and `es` module formats\n- [create-react-app](https://github.com/facebookincubator/create-react-app) for example usage and local dev\n- [Rollup](https://rollupjs.org/) for bundling\n- [Babel](https://babeljs.io/) for transpiling\n- [Jest](https://facebook.github.io/jest/) for testing\n- Supports complicated peer-dependencies\n- Optional support for TypeScript\n- Sourcemap creation\n\n## Install\n\nThis package requires `node \u003e= 4`, but we recommend `node \u003e= 8`.\n\n```bash\nnpm install -g create-react-hook\n```\n\n\n## Creating a New Hook\n\n```bash\ncreate-react-hook\n```\n\nAnswer some basic prompts about your module, and then the CLI will perform the following steps:\n\n- copy over the template\n- install dependencies via yarn or npm\n- link packages together for local development\n- initialize local git repo\n\n## Development\n\nLocal development is broken into two parts (ideally using two tabs).\n\nFirst, run rollup to watch your `src/` module and automatically recompile it into `dist/` whenever you make changes.\n\n```bash\nnpm start # runs rollup with watch flag\n```\n\nThe second part will be running the `example/` create-react-app that's linked to the local version of your module.\n\n```bash\n# (in another tab)\ncd example\nnpm start # runs create-react-app dev server\n```\n\nNow, anytime you make a change to your library in `src/` or to the example app's `example/src`, `create-react-app` will live-reload your local dev server so you can iterate on your component in real-time.\n\n\n#### Publishing to NPM\n\n```bash\nnpm publish\n```\n\nThis builds `cjs` and `es` versions of your module to `dist/` and then publishes your module to `npm`.\n\nMake sure that any npm modules you want as peer dependencies are properly marked as `peerDependencies` in `package.json`. The rollup config will automatically recognize them as peers and not try to bundle them in your module.\n\n#### Deploying to Github Pages\n\n```bash\nnpm run deploy\n```\n\nThis creates a production build of the example `create-react-app` that showcases your library and then runs `gh-pages` to deploy the resulting bundle.\n\n## Examples\n\n### Libraries\n\nHere are some example libraries that have been bootstrapped with `create-react-hook`.\n\n- [use-suspense-today](https://github.com/Hermanya/use-suspense-today) - Use React Suspense with any library\n- [use-typing-effect](https://github.com/hermanya/use-typing-effect) - React hook for \"Human Typing\" effect\n- [use-scroll-to-reveal](https://github.com/hermanya/use-scroll-to-reveal) - React hook for revealing content upon scroll\n- [use-interval](https://github.com/Hermanya/use-interval) - React hook for setting intervals [properly](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)\n- [react-indicative-hooks](https://github.com/marceloadsj/react-indicative-hooks) - Hooks for [indicative](https://indicative.adonisjs.com/) validation library\n- [use-3d-effect](https://github.com/Hermanya/use-3d-effect) - Hook for the 3D tilt card effect\n- [react-rxjs-hook](https://github.com/jarlah/react-rxjs-hook) - A useStore hook to be used in conjunction with react-rxjs\n- [use-pusher](https://github.com/mayteio/use-pusher) - Easy as hooks that integrate with the pusher-js library\n- [use-axios-hooks](https://github.com/zaingz/use-axios-hooks) - Axios hook\n- [react-shortcuts-hook](https://github.com/macfire10/react-shortcuts-hook) - Keyboards shortcuts\n- [use-auto-progress](https://github.com/ZengLawrence/use-auto-progress) - Hook based on [best practices for animated progress indicators](https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/)\n- [use-marked-hook](https://github.com/this-fifo/use-marked-hook) - Marked.js wrapper\n- [use-leet](https://github.com/taystack/use-leet) - turn your given text value into 1337 SP34K\n- [use-debounce-input](https://github.com/GuySerfaty/use-debounce-input) - debounce inputs\n- [use-media-set](https://github.com/cvkline/use-media-set) - make components responsive to media query changes\n- [use-as-bind](https://github.com/tylervipond/use-as-bind) - hook for using [as-bind](https://github.com/torch2424/as-bind) with a WASM source\n- [use-reducer-with-effects](https://github.com/frankiesardo/use-reducer-with-effects)\n- [react-use-hotjar](https://github.com/olavoparno/react-use-hotjar)\n- [react-use-scripts](https://github.com/olavoparno/react-use-scripts)\n- [react-use-intersection-observer-hooks](https://github.com/GypsyDangerous/use-intersection-observer)\n- [use-airtable](https://github.com/ignatif/use-airtable)\n- [react-use-presentation](https://github.com/olavoparno/react-use-presentation)\n- [@dannyman/use-store](https://github.com/danny-fallas/use-store-react) - React Hook to enable using useState across the whole React Application (NO REDUX)\n- [use-active-detect](https://github.com/yyz945947732/use-active-detect)\n- ... and maybe more!\n\nWant to add yours to the list? Submit a Pull Request!\n\n\n## License\n\nMIT © [Travis Fischer](https://github.com/transitive-bullshit)\nMIT © [Herman Starikov](https://github.com/hermanya)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhermanya%2Fcreate-react-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhermanya%2Fcreate-react-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhermanya%2Fcreate-react-hook/lists"}