This is a boilerplate to create an NPM package for one or more ReactJS custom hooks and components. I hope you find it helpful.
Liked it? You can show your support with a STAR(⭐).
Many Thanks to all the
Stargazerswho have supported this project with stars(⭐). I am an independent educator who creates meaningful projects to teach programming. You can support me further by sponsoring me on GitHub.
You can use the project in this way:
-
- Clone this repository and change the directory to the project folder.
-
- Edit the
package.jsonfile to change the package name, author info, and GitHub link info as per your information.
- Edit the
-
- Run
npm installin the root directory of your project.
- Run
-
- Add your React component and hooks. Hooks to go inside the
hooksfolder.
- Add your React component and hooks. Hooks to go inside the
You can build the project in two ways:
-
yarn build: To build the project with a source map.
-
yarn build: prod. This will generate minified files without a sourcemap.
After building, create a npm locally to test:
npm pack: this command will generate the tar npm package file that you can take to any React-based projects(including Next.js) and use it.
- Just copy the tar npm package file into your ReactJS/Next.js project folder.
- Add this line to your project's
package.jsonfile:Please note the"<NPM-PACKAGE-NAME>": "file:<PATH-TO-THE-TAR-PACKAGE-FILE>",
NPM-PACKAGE-NAMEshould be the same as the name you provided in thepackage.jsonfile after cloning this repo. - Now you can check the
node-modulesfolder to see if a new folder has been created with theNPM-PACKAGE-NAME. Then your installation is successful.
- To publish it, you must have an account on https://www.npmjs.com.
- Make sure to be in this project folder.
- Now, open a command prompt/terminal and execute this command to login:
npm login - Please provide the credentials you have created already. You can also check if you are in the session with the following command,
npm whoami
The next part is just to run the the publish command,
npm publish
Happy Publishing!