2. What is create-react -library?
- It’s CLI(command line interface) for creating reusable, modern React libraries using create-react-library.
- E.g. When we use create-react-app at times it’s given ready to use application structure for react application. For the same way using create-react-library gives ready to use structure for creating react-library and publish to npm.
3. What are the prerequisites for it?
- Installed node and npm
- Npm account (if not then sign up here: https://www.npmjs.com/signup)
- Public git repo
- First of all, you need to come up with the name of your package and make sure that it’s available. Go to https://www.npmjs.com/ and check it through the search bar.
4. How to Create a React custom package library and publish it into npm?
Step: 1Login to NPM via CLI (How can we Login with NPM CLI?)
npm install -g npm-cli-login
npm-cli-login -u username -p PASSWORD -e email
Step: 2Open your terminal, go to the directory, where you are going to create your package and enter the following command.
npx create-react-library <name of your package>After enter above command it will ask some question about your package provide details
Step: 3After follow above two step in that directory below files are created and sample demo component
Step: 4After successfully created library project enter below command for starting library project
&& npm start
cd example && npm startfor starting example project which have used our created library.
Step: 6For publishing library enter below command
npm publish --access=public
Scopes and package visibilityThere are two types of libraries: public and private. public library called Unscoped packages and private library called scoped library. For publishing a scoped package you must have a paid version of npm account or organisation account.
After hitting the above command if your package successfully published then the below screen is visible.For cross verification you can also check on the npm website by searching your package.
- Unscoped packages are always public.
- Private packages are always scoped.
- Scoped packages are private by default; you must pass a command-line flag when publishing to make them public.
How can we implement it in other projects?
- Step : 1 Install package in your project e.g. npm install –save
- Step : 2 Import package in component in which you want to use
- Step : 3 import css file from package.
Some Important Points
- To publish a package as private for that we need a Paid account or organization account.
- For public packages we can set additional authentication methods that add another level of security for your package.
- For Update the package version change version in package.json file and again publish package.
- If you find any error like 403 forbidden then check your package name, make sure your npm email verification is done, your npm login via CLI is done, check package version.