├── .npmignore ├── src └── YOUR_COMPONENT.js ├── .babelrc ├── .gitignore ├── package.json ├── webpack.config.js └── README.md /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | webpack.config.js 3 | .babelrc 4 | .eslintrc.js -------------------------------------------------------------------------------- /src/YOUR_COMPONENT.js: -------------------------------------------------------------------------------- 1 | // Replace this file with your actual React component -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "react", 4 | "env", 5 | "stage-0" 6 | ] 7 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "YOUR_PACKAGE_NAME", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "./lib/YOUR_COMPONENT.js", 6 | "license": "MIT", 7 | "scripts": { 8 | "build": "webpack" 9 | }, 10 | "peerDependencies": { 11 | "prop-types": "^15.6.0", 12 | "react": "^16.0.0", 13 | "react-dom": "^16.0.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.21.0", 17 | "babel-loader": "^7.1.4", 18 | "babel-preset-env": "^1.6.1", 19 | "babel-preset-react": "^6.16.0", 20 | "babel-preset-stage-0": "^6.24.1", 21 | "css-loader": "^3.5.1", 22 | "path": "^0.12.7", 23 | "prop-types": "^15.6.0", 24 | "react": "^16.0.0", 25 | "react-dom": "^16.0.0", 26 | "style-loader": "^1.1.3", 27 | "webpack": "^4.5.0", 28 | "webpack-cli": "^3.2.1" 29 | }, 30 | "dependencies": {} 31 | } 32 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | mode: 'production', 5 | entry: './src/YOUR_COMPONENT.js', 6 | output: { 7 | path: path.resolve('lib'), 8 | filename: 'YOUR_COMPONENT.js', 9 | libraryTarget: 'commonjs2', 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.js?$/, 15 | exclude: /(node_modules)/, 16 | use: 'babel-loader', 17 | }, 18 | { 19 | test: /\.css$/, 20 | use: [ 21 | 'style-loader', 22 | 'css-loader' 23 | ] 24 | } 25 | ], 26 | }, 27 | resolve: { 28 | alias: { 29 | 'react': path.resolve(__dirname, './node_modules/react'), 30 | 'react-dom': path.resolve(__dirname, './node_modules/react-dom'), 31 | } 32 | }, 33 | externals: { 34 | // Don't bundle react or react-dom 35 | react: { 36 | commonjs: "react", 37 | commonjs2: "react", 38 | amd: "React", 39 | root: "React" 40 | }, 41 | "react-dom": { 42 | commonjs: "react-dom", 43 | commonjs2: "react-dom", 44 | amd: "ReactDOM", 45 | root: "ReactDOM" 46 | } 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > 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-9cf48d91944d) 2 | 3 | ## Guide 4 | 1. Replace contents in `/src` with your React component. 5 | 1. Edit `webpack.config.js`, replace the following: 6 | 1. `entry: './src/YOUR_COMPONENT.js'` Replace value of `entry` to path to the entry point of your component. 7 | 1. Replace `output.filename` to the name of your component 8 | ``` 9 | output: { 10 | path: path.resolve('lib'), 11 | filename: 'YOUR_COMPONENT.js', 12 | libraryTarget: 'commonjs2', 13 | }, 14 | ``` 15 | 1. Edit `package.json`, replace the following: 16 | 1. `"name": "YOUR_PACKAGE_NAME"` Replace the value of `name` to your package name. This will be the name of the package that is published to `npm` and the name that is used when other people install your package using `npm install YOUR_PACKAGE_NAME`. 17 | 1. Update the values of `version` and `description` to accordingly. 18 | 1. `"main": "./lib/YOUR_COMPONENT.js"` replace `YOUR_COMPONENT.js` with the name that you've set in `output.filename` during Step #2 19 | 1. If your component uses any other dependencies, make sure to add them into the `peerDependencies` list. 20 | 1. Building your component by running `npm build` in your command line. This would generate the folder `/lib` which includes your component. 21 | 1. Publishing to [npm](https://www.npmjs.com/) 22 | 1. Make sure you've [registered an npm account](https://www.npmjs.com/signup) 23 | 1. Run `npm login` in your command line, and enter your credentials. 24 | 1. 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. 25 | 26 | 1. To update your package, make sure you remember to increment the `version` in `package.json`, and then perform Step #5 again. 27 | --------------------------------------------------------------------------------