Getting started with Hook Crafter

Hook Crafter is a Vite and TypeScript template for building your React hook library.

Install the dependencies

Download the latest release and install the dependencies with npm, yarn, or pnpm.

npm

npm install

yarn

yarn

pnpm

pnpm install

Update the package.json file

Go to the package.json file and update the name, description, repository, keywords, author, license, private, and version properties to match those of your library.

Also, replace the substring hook-crafter with your library’s name in the main, module, types, and exports properties.

package.json

{
  "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 <[email protected]>",
  "author": "Your Name <[email protected]>",
  "license": "MIT",
  "license": "license-name",
  "private": false,
  "private": true,
  "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 directory and export them in the index.ts file.

useCountup.ts

import {useState} from "react";

export const useCountUp = (increase: number) => {
    const [count, setCount] = useState(0);

    const increment = () => setCount(count + increase);
    return {count, increment};
};

index.ts

export * from "./useCountUp";