Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/dlcastillop/hook-crafter

Build a React hook library faster
https://github.com/dlcastillop/hook-crafter

react-custom-hook react-custom-hooks react-hooks typescript vite

Last synced: 6 days ago
JSON representation

Build a React hook library faster

Host: GitHub
URL: https://github.com/dlcastillop/hook-crafter
Owner: dlcastillop
License: mit
Created: 2023-09-08T20:05:39.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2024-05-27T13:36:26.000Z (6 months ago)
Last Synced: 2024-05-27T13:55:14.009Z (6 months ago)
Topics: react-custom-hook, react-custom-hooks, react-hooks, typescript, vite
Language: TypeScript
Homepage:
Size: 159 KB
Stars: 12
Watchers: 2
Forks: 0
Open Issues: 2
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

# Hook Crafter

Build your own React custom hooks faster.

## Project structure

```text
├── src/
│ └── hooks/
│ ├── useYourHook.ts
│ └── index.ts
├── package.json
└── vite.config.ts
```

## Getting started

### Install the dependencies

Download the last release and install the dependencies with npm, yarn o pnpm:

```bash
npm install
```

```bash
yarn
```

```bash
pnpm install
```

### Update the `package.json` file

Go to the `package.json` file and change the `name`, `description`, `repository`, `keywords`, `author`, `license`, `private` and `version` props to the ones of your library.

Also replace the substring `hook-crafter` with the name of your library in the `main`, `modules`, `types` and `exports`.

```diff
{
-// "name": "hook-crafter",
+// "name": "your-library-name",
-// "description": "Build your own React custom hooks faster",
+// "description": "Your library description",
"repository": {
"type": "git",
-// "url": "https://github.com/dlcastillop/hook-crafter"
+// "url": "your-repository-url"
},
-// "keywords": ["react-hooks", "react-custom-hook", "react-custom-hooks", "vite", "typescript"],
+// "keywords": ["keyword-one", "keyword-two"],
-// "author": "Daniel Castillo ",
+// "author": "Your Name ",
-// "license": "MIT",
+// "license": "license-name",
-// "private": false,
+// "private": true || false,
-// "version": "1.1.0",
+// "version": "0.1.0",
"type": "module",
-// "main": "dist/hook-crafter.umd.js",
+// "main": "dist/your-library-name.umd.js",
-// "module": "dist/hook-crafter.es.js",
+// "module": "dist/your-library-name.es.js",
-// "types": "dist/hook-crafter.d.ts",
+// "types": "dist/your-library-name.d.ts",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"typescript": "^5.2.2",
"vite": "^5.0.8",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"vite-plugin-dts": "^3.6.4"
},
"exports": {
".": {
-// "import": "./dist/hook-crafter.es.js",
+// "import": "./dist/your-library-name.es.js",
-// "require": "./dist/hook-crafter.umd.js",
+// "require": "./dist/your-library-name.umd.js",
-// "types": "./dist/hook-crafter.d.ts",
+// "types": "./dist/your-library-name.d.ts",
-// "default": "./dist/hook-crafter.es.js"
+// "default": "./dist/your-library-name.es.js"
}
},
"files": [
"dist",
"package.json"
]
}
```

### Create your hooks

Create all your hooks inside the `src/hooks` folder and export them in the `index.ts` file. For reference, you can check the example hook in the `src/hooks` folder.

> [!NOTE]
> Do you need hooks for your project? Try [Nova.js: a collection of dependency-free React hooks](https://novajs.co/).

## Publish your library to NPM

### Generate the build

Generate the build using npm, yarn or pnpm.

```bash
npm run build
```

```bash
yarn build
```

```bash
pnpm build
```

### Login to npm

```bash
npm login
```

### Publish your library

```bash
npm publish
```

## Contributions

If you're interested in contributing to Hook Crafter, please read our [contributing docs](https://github.com/dlcastillop/hook-crafter/blob/main/CONTRIBUTING.md) before submitting a pull request.

## Support

Don't forget to leave a star!