Adding npm library and require it to a react project

Often in your organization, you may be asked or want to add common components and modules that are self-tailored for your organization and may have some private data in it or just too beautiful to share.

Therefore, there’s an option to add a new registry library that won’t be uploaded to any public registry provider and will be only available inside the organization.

I’ll share a few steps to help you do that:

1. Open the console in the location you want to add it and install a boilerplate for the library, I’ve chosen create-react-library

You can use either:

npx create-react-library

Or:

npm install -g create-react-library

The console will ask for some details like Package Name and Package Manager.

For example maayan-common, npm

2. Run the new project

1. In the console use:

cd maayan-common
npm start

3. Add the new registry to an existing React project

1. Open a new console and navigate to the existing project
2. Install the new registry project inside the existing project:

cd existing-project
npm install path-to-new-registry-prject\maayan-common

4. Require components from the new registry

Start by requiring the example Component to one of your pages in the existing project by adding:

Import { ExampleComponent } from maayan-common

5. Add or modify components in the new registry

1. Open your new registry project on your IDE
2. Go to: src → index.js
3. add the changes

1. To run the changes use:

npm start