Build your own React custom hooks faster.
├── src/
│ └── hooks/
│ ├── useYourHook.ts
│ └── index.ts
├── package.json
└── vite.config.ts
Download the last release and install the dependencies with npm, yarn o pnpm:
npm installyarnpnpm installGo 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.
{
-// "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 <daniel@dlcastillop.com>",
+// "author": "Your Name <your-email@domain.com>",
-// "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 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.
Generate the build using npm, yarn or pnpm.
npm run buildyarn buildpnpm buildnpm loginnpm publishIf you're interested in contributing to Hook Crafter, please read our contributing docs before submitting a pull request.
Don't forget to leave a star!