Publishing your own React hook to npm is a massive milestone. It allows you to reuse your code across projects and share your work with the global developer community.

What We Are Building

We will create a React hook called useCopy that:

Copies text to the clipboard
Tells you when copying succeeded
Tells you when copying failed

The final package will be usable like this:

import { useCopy } from "use-copy";

Requirements (Do Not Skip This)

Before we start, you must have the following installed.

1. Node.js (Required)

You must have Node.js installed. This is the environment that allows us to run JavaScript outside of a browser and use npm (Node Package Manager).

Check if you have Node installed: Open your terminal (Command Prompt, PowerShell, or Terminal) and type:

node -v

If you see a version number (e.g., v18.17.0 or higher), You are ready.

If this command fails, install Node.js from:

👉 https://nodejs.org (LTS version recommended)

Installing Node automatically installs npm.

2. A Code Editor

Use any editor, but recommended:

Visual Studio Code (VS Code)

👉 https://code.visualstudio.com

3. An npm Account (For Publishing)

You must create an npm account before publishing.

👉 https://www.npmjs.com/signup

Keep your username and password safe.

Step 1: Project Setup with Vite

We need a development environment. We will use Vite. Vite is a build tool that is much faster than older tools like Create React App. We are using it because it gives us a testing ground to run our hook before publishing.

Next step: We will create a new project folder using the Vite template for React with TypeScript.

Run the following commands in your terminal:

npm create vite@latest use-copy -- --template react-ts

npm create vite@latest: Downloads the latest version of the Vite creator.

use-copy: This is the name of the folder we are creating.

-- --template react-ts: This flags tells Vite to set up React and TypeScript for us automatically.

Next step: Now we need to enter that folder and install the base dependencies (like React itself) that Vite listed in the project configuration.

Now move into the project:

cd use-copy

Install dependencies:

npm install

Start the dev server to confirm everything works:

npm run dev

If you see a running React app, your setup is correct.

Stop the server (Ctrl + C).

Step 2: Create a Dedicated Hook Folder

We do not publish the entire Vite app.

We publish only the hook.

Create this folder structure:

src/

hook/

useCopy.ts

Next step: Create the file src/hook/useCopy.ts.

Paste the following code into that file. This code uses the Clipboard API to copy text and manages a copied state (true/false) so we can show a success message to the user.

import { useState } from "react";

export function useCopy() {

const [copied, setCopied] = useState(false);

const [error, setError] = useState<string | null>(null);

const copy = async (text: string) => {

setError(null);

try {

// This is the browser API that actually copies to the clipboard

await navigator.clipboard.writeText(text);

setCopied(true);

// Reset the "copied" status after 1.5 seconds

setTimeout(() => setCopied(false), 1500);

} catch (err) {

setError("Failed to copy");

}

};

return { copy, copied, error };

}

export default useCopy;

copy(text) → copies text
copied → becomes true temporarily
error → contains an error message if copying fails

This hook works in modern browsers that support the Clipboard API.

Step 3: Initialize the Package Configuration

This is the most critical part of the tutorial.

Usually, a package.json file controls your entire project. However, we only want to publish the hook, not the entire Vite website. Therefore, we need to create a specific package.json inside the src/hook folder. This tells npm exactly how to handle just this specific folder.

Next step: Create a new file named package.json inside the src/hook folder.

Copy the code below. Note: You must change the "name" field if use-copy is already taken on npm. I recommend using a scoped name like @your-username/use-copy to ensure it is unique.

{

"name": "use-copy",

"version": "1.0.0",

"description": "A React hook for copying text to the clipboard with feedback.",

"type": "module",

"main": "./dist/useCopy.cjs",

"module": "./dist/useCopy.js",

"types": "./dist/useCopy.d.ts",

"exports": {

".": {

"types": "./dist/useCopy.d.ts",

"import": "./dist/useCopy.js",

"require": "./dist/useCopy.cjs"

}

},

"files": [

"dist",

"README.md"

],

"scripts": {

"build": "tsup",

"prepublishOnly": "npm run build"

},

"peerDependencies": {

"react": ">=16.8.0"

},

"devDependencies": {

"react": "^18.3.1",

"tsup": "^8.3.5",

"typescript": "^5.6.3"

}

}

Understanding this file:

main, module, exportsThese tell the user's computer which file to use, depending on whether they are using old Node.js (CommonJS) or modern JavaScript (ESM).
peerDependencies: We list React here instead of dependencies. This tells the user: "You must already have React installed to use this hook." We don't want to bundle a second copy of React inside our package.
files: This whitelist ensures we only upload the dist (built code) and the README to npm, ignoring your source code files.

Step 4: Configure TypeScript for the Hook

The TypeScript configuration for your entire Vite app is too broad. We need a specific configuration for the hook to ensure it generates "Type Definitions" (.d.ts files). These files allow users of your library to get autocomplete suggestions in VS Code.

Next step: Create a file named tsconfig.json inside the src/hook folder.

{

"compilerOptions": {

"target": "ES2020",

"module": "ESNext",

"lib": ["ES2020", "DOM"],

"jsx": "react",

"declaration": true,

"declarationMap": true,

"outDir": ".",

"moduleResolution": "node",

"esModuleInterop": true,

"skipLibCheck": true,

"strict": true,

"forceConsistentCasingInFileNames": true

},

"include": ["useCopy.ts"],

"exclude": ["node_modules"]

}

Step 5: Configure the Bundler (tsup)

We cannot publish raw TypeScript code to npm; browsers don't understand it. We need to compile it into standard JavaScript. We will use a tool called tsup. It is swift and handles generating both standard JS (.js) and CommonJS (.cjs) formats automatically.

Next step: Create a file named tsup.config.ts inside the src/hook folder.

import { defineConfig } from "tsup";

export default defineConfig({

entry: ["useCopy.ts"],

format: ["esm", "cjs"],

dts: true,

splitting: false,

sourcemap: true,

clean: true,

});

What does this do?

format: ["esm", "cjs"]: Creates two versions of your code so it works on every project setup.
dts: true: Automatically generates the TypeScript type definition files.
clean: true: Deletes the old build folder before creating a new one.

Step 6: Install Build Dependencies

We have created the configuration files, but we haven't actually installed the tools we listed in the package.json (specifically tsup).

Next step: We need to navigate into the hook directory and install the dependencies specifically for that folder.

cd src/hook

npm install

This reads the package.json inside src/hook and installs tsup and typescript into a local node_modules folder.

Step 7: Build the Package

Now everything is configured. It is time to convert your TypeScript code into a distributable package.

Next step: Run the build script we defined earlier.

npm run build

Verification: Look inside your src/hook folder. You should now see a new folder named dist. Inside dist, you should see:

useCopy.js (Modern JS)
useCopy.cjs (CommonJS)
useCopy.d.ts (Type definitions)

If you see these files, your package is successfully built!

Step 8: Documentation

You should never publish a package without a README. This is what appears on the npm website page.

Next step: Create src/hook/README.md.

# use-copy

A simple, lightweight React hook to copy text to the clipboard.

## Installation

```bash

npm install use-copy

Usage

import { useCopy } from "use-copy";

function App() {

const { copy, copied, error } = useCopy();

return (

<button onClick={() => copy("Hello World")}>

{copied ? "Copied!" : "Copy Text"}

</button>

);

}

Step 8: Publish to npm

Now push your code to the public registry.

Requirement: You must have an account on npmjs.com. If you don't, go sign up.

Next step: Log in to your npm account via the terminal.

npm login

Follow the instructions in the terminal to open your browser and authenticate.

Next step: Publish the package. Make sure you are still inside the src/hook directory!

npm publish

Common Error - Name Conflict: If you get a 403 Forbidden error, it likely means the name use-copy is already taken by someone else.

Open src/hook/package.json.
Change the "name" field to something unique (e.g., my-name-use-copy).
Run npm publish again.

Next Steps

Add tests
Add ESM-only build
Improve clipboard fallback support
Create more reusable hooks

Conclusion

You have successfully:

Set up a Vite project.
Isolated a React hook logic.
Configured a dual-build system (ESM and CJS) using tsup.
Published your package to the world.

To use your new hook in a different project, run npm install your-package-name and import it just like we did in the README example.