I built a Component that I want to use in separate projects. What is the simplest best way to reuse this Component across projects using NPM?
First, you'll need to create two components, one parent and one child. Next, you'll import the child component in the parent component and return it. Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.
You haven't indicated whether you wish to keep this component private, so I'm going to answer two ways:
This is easiest: publish your component(s) as an npm
package (see the docs here). Then install your package just like any other in the projects where you will be using your components.
You have several options here:
pay for a private modules on npm
(docs here). If you go this route, you can install your package just like any other.
Use npm link
(docs) to create a link from the project(s) to the component package located on your local storage. This works but is kind of tricky to set up. The benefit of this is that if you rebuild your component, all projects with a link to the component will see those changes immediately.
Use npm install
to install from your (private) Github or other repository. This works similarly to the normal npm install
and is a little easier to use than npm link
. The downside is that any changes to the component need to be pushed to the remote repository and then the project(s) using the component need to be updated.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With