Create an NPM Package from a React component

I've made the video tutorial on how to create an NPM Package from your React Component. And in this article, I'd like to illustrate it with code. All details you can find in the GitHub repo of this tutorial.

Package setup ./package.json:

{
  "name": "super-lemon",
  "version": "1.0.0",
  "description": "",
  "main": "./build/index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "guandjoy",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/preset-env": "^7.7.6",
    "@babel/preset-react": "^7.7.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.3.0",
    "style-loader": "^1.0.1",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "@material/react-button": "^0.15.0",
    "prop-types": "^15.7.2",
    "react": "^16.12.0"
  }
}

Babel presets ./.babelrc:

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

Webpack configurations ./webpack.config.js:

var path = require("path");

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve("build"),
    filename: "index.js",
    libraryTarget: "commonjs2"
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      }
    ]
  },
  externals: {
    react: "react"
  }
};

Our React Component ./src/index.js:

import React from 'react'

function Component() {
  return <div>Our package</div>
}

export default Component

Once you created all the files, you can build a bundle:

npm run build

Create a link to test it locally, before publishing:

npm link

And don't forget to use the instance of React from the environment you were going to test it:

npm link ../path/to/application/node_modules/react

Publish, once it works:

npm publish

Thanks for watching! Hope it helped you to develop your own not a lemon library 😊

Comments

[Yurko Turskiy]

I'm glad it helped :) And sorry for the belated answer.

Unfortunately, I have no experience working with react-native. But I think you can if it works for you. You should only somehow exclude React Native from your bundle.

Maybe this article will help: dev.to/kylessg/developing-npm-modu...

[João Brasileiro]

It helped me a lot, thanks!
I noticed that in dependences on package.js you have "@material/react-button": "^0.15.0", and maybe someone who doesn't understand may end up adding this dependency to their package without the real need.