button-modal-call-me
v1.0.0
Published
> This project is created to simplify the process of publishing a React component to npm. For a full tutorial on publishing React component to npm, please refer to [this guide](https://medium.com/groftware/how-to-publish-your-react-component-on-npm-9cf48d
Downloads
2
Readme
This project is created to simplify the process of publishing a React component to npm. For a full tutorial on publishing React component to npm, please refer to this guide
Guide
Replace contents in
/src
with your React component.Edit
webpack.config.js
, replace the following:entry: './src/YOUR_COMPONENT.js'
Replace value ofentry
to path to the entry point of your component.- Replace
output.filename
to the name of your component
output: { path: path.resolve('lib'), filename: 'YOUR_COMPONENT.js', libraryTarget: 'commonjs2', },
Edit
package.json
, replace the following:"name": "YOUR_PACKAGE_NAME"
Replace the value ofname
to your package name. This will be the name of the package that is published tonpm
and the name that is used when other people install your package usingnpm install YOUR_PACKAGE_NAME
.- Update the values of
version
anddescription
to accordingly. "main": "./lib/YOUR_COMPONENT.js"
replaceYOUR_COMPONENT.js
with the name that you've set inoutput.filename
during Step #2- If your component uses any other dependencies, make sure to add them into the
peerDependencies
list.
Building your component by running
npm build
in your command line. This would generate the folder/lib
which includes your component.Publishing to npm
- Make sure you've registered an npm account
- Run
npm login
in your command line, and enter your credentials. - Run
npm publish
, and your React component will be uploaded to npm! You can find it at https://www.npmjs.com/package/[YOUR PACKAGE NAME] or your npm profile.
To update your package, make sure you remember to increment the
version
inpackage.json
, and then perform Step #5 again.