DEV Community

Cover image for Create an NPM Package from a React component
Yurko Turskiy
Yurko Turskiy

Posted on

Create an NPM Package from a React component

#javascript #react #npm #tutorial

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

Babel presets ./.babelrc:

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}
Enter fullscreen mode Exit fullscreen mode

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"
  }
};
Enter fullscreen mode Exit fullscreen mode

Our React Component ./src/index.js:

import React from 'react'

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

export default Component
Enter fullscreen mode Exit fullscreen mode

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

npm run build
Enter fullscreen mode Exit fullscreen mode

Create a link to test it locally, before publishing:

npm link
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Publish, once it works:

npm publish
Enter fullscreen mode Exit fullscreen mode

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

Top comments (3)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
yurko_turskiy profile image
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...

Collapse
 
codingjon profile image
João Brasileiro • • Edited

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.