Create-and-publish-a-custom-react-component-Library-to-Node-Package-Manager-(NPM)
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: 1
    Login 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: 2
    Open 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: 3
    After follow above two step in that directory below files are created and sample demo component
  • Step: 4
    After successfully created library project enter below command for starting library project
    cd  && npm start
  • Step: 5
    cd example && npm start
    for starting example project which have used our created library.
  • Step: 6
    For publishing library enter below command
    npm publish --access=public
    Scopes and package visibility
    There 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.
    • 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.
    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.
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.

Mr. Radhik Bhojani