Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hermanya/create-react-hook

🎣CLI for easily creating reusable react hooks.
https://github.com/hermanya/create-react-hook

Last synced: 2 months ago
JSON representation

🎣CLI for easily creating reusable react hooks.

Host: GitHub
URL: https://github.com/hermanya/create-react-hook
Owner: Hermanya
Created: 2019-01-28T01:22:03.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2023-09-10T15:25:11.000Z (about 1 year ago)
Last Synced: 2024-07-19T09:27:09.056Z (3 months ago)
Language: JavaScript
Homepage:
Size: 5.05 MB
Stars: 384
Watchers: 9
Forks: 24
Open Issues: 12
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        # create-react-hook

> CLI for creating reusable React hooks using Rollup and create-react-app.

> Inspired by the amazing [create-react-library](https://github.com/transitive-bullshit/create-react-library)

[![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)

[How and why I made this tool.](https://medium.com/@Hermanhasawish/how-to-create-a-reusable-react-hook-9e42e73b2f9a)

## Features

- Easy-to-use CLI

- Handles all modern JS features

- Bundles `cjs` and `es` module formats

- [create-react-app](https://github.com/facebookincubator/create-react-app) for example usage and local dev

- [Rollup](https://rollupjs.org/) for bundling

- [Babel](https://babeljs.io/) for transpiling

- [Jest](https://facebook.github.io/jest/) for testing

- Supports complicated peer-dependencies

- Optional support for TypeScript

- Sourcemap creation

## Install

This package requires `node >= 4`, but we recommend `node >= 8`.

```bash

npm install -g create-react-hook

```

## Creating a New Hook

```bash

create-react-hook

```

Answer some basic prompts about your module, and then the CLI will perform the following steps:

- copy over the template

- install dependencies via yarn or npm

- link packages together for local development

- initialize local git repo

## Development

Local development is broken into two parts (ideally using two tabs).

First, run rollup to watch your `src/` module and automatically recompile it into `dist/` whenever you make changes.

```bash

npm start # runs rollup with watch flag

```

The second part will be running the `example/` create-react-app that's linked to the local version of your module.

```bash

# (in another tab)

cd example

npm start # runs create-react-app dev server

```

Now, 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.

#### Publishing to NPM

```bash

npm publish

```

This builds `cjs` and `es` versions of your module to `dist/` and then publishes your module to `npm`.

Make 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.

#### Deploying to Github Pages

```bash

npm run deploy

```

This creates a production build of the example `create-react-app` that showcases your library and then runs `gh-pages` to deploy the resulting bundle.

## Examples

### Libraries

Here are some example libraries that have been bootstrapped with `create-react-hook`.

- [use-suspense-today](https://github.com/Hermanya/use-suspense-today) - Use React Suspense with any library

- [use-typing-effect](https://github.com/hermanya/use-typing-effect) - React hook for "Human Typing" effect

- [use-scroll-to-reveal](https://github.com/hermanya/use-scroll-to-reveal) - React hook for revealing content upon scroll

- [use-interval](https://github.com/Hermanya/use-interval) - React hook for setting intervals [properly](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)

- [react-indicative-hooks](https://github.com/marceloadsj/react-indicative-hooks) - Hooks for [indicative](https://indicative.adonisjs.com/) validation library

- [use-3d-effect](https://github.com/Hermanya/use-3d-effect) - Hook for the 3D tilt card effect

- [react-rxjs-hook](https://github.com/jarlah/react-rxjs-hook) - A useStore hook to be used in conjunction with react-rxjs

- [use-pusher](https://github.com/mayteio/use-pusher) - Easy as hooks that integrate with the pusher-js library

- [use-axios-hooks](https://github.com/zaingz/use-axios-hooks) - Axios hook

- [react-shortcuts-hook](https://github.com/macfire10/react-shortcuts-hook) - Keyboards shortcuts

- [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/)

- [use-marked-hook](https://github.com/this-fifo/use-marked-hook) - Marked.js wrapper

- [use-leet](https://github.com/taystack/use-leet) - turn your given text value into 1337 SP34K

- [use-debounce-input](https://github.com/GuySerfaty/use-debounce-input) - debounce inputs

- [use-media-set](https://github.com/cvkline/use-media-set) - make components responsive to media query changes

- [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

- [use-reducer-with-effects](https://github.com/frankiesardo/use-reducer-with-effects)

- [react-use-hotjar](https://github.com/olavoparno/react-use-hotjar)

- [react-use-scripts](https://github.com/olavoparno/react-use-scripts)

- [react-use-intersection-observer-hooks](https://github.com/GypsyDangerous/use-intersection-observer)

- [use-airtable](https://github.com/ignatif/use-airtable)

- [react-use-presentation](https://github.com/olavoparno/react-use-presentation)

- [@dannyman/use-store](https://github.com/danny-fallas/use-store-react) - React Hook to enable using useState across the whole React Application (NO REDUX)

- [use-active-detect](https://github.com/yyz945947732/use-active-detect)

- ... and maybe more!

Want to add yours to the list? Submit a Pull Request!

## License

MIT © [Travis Fischer](https://github.com/transitive-bullshit)

MIT © [Herman Starikov](https://github.com/hermanya)