Creating an npm package from React Component

In this blog, I will create an npm package from a simple React component. Then we will publish the npm package. Publishing a React component may be useful to you if it’s of some standard use and not easy to be created. You can use the React component easily from your published npm package.

• You need to have node installed in your system. Node comes installed by default with npm, so you need not worry if you have npm install. Else, Download node from here

1. Setup React Project

Generally, to set up a react project, you have to ensure that you have npx installed or create-react-app installed globally.
For npx,

npx create-react-app my-react-component

For create-react-app installed globally,

sudo npm install -g create-react-app
create-react-app my-react-component

We need another dependency (babel) here.
Babel is a transpiler for Es6 => Es5.

npm i --save-dev @babel/cli @babel/preset-react

2. Create React Component

Create a components directory in the src directory and add a file named myComponent.js
The myComponent.js contains the code for our component
Add your css files also inside the components directory.

myComponent.js

import React from 'react';
import 'styles.css';
const myComponent = (props) => {
return(
  <div className="styled-component">
    {props.children}
  </div>);
};
export default myComponent;

3. Style the Component

styles.css

.styled-component {
  color: white;
  background-color: black;
}

4. Package.json

To publish the package successfully, we have to make changes to the package.json file

• Open the package and add the following
• Add publish to scripts

"publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",

• set private to false

"private": false,

• Add babel

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

Here is the full package.json file

{
  "name": "react-custom-card", 
  "version": "0.1.0", 
  "private": false, 
  "babel": {  
    "presets": [  
      "@babel/preset-react"   
    ] 
  }, 
  "dependencies": {   
    "react": "^16.4.0", 
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
   },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "publish:npm": "rm -rf dist && mkdir dist &&  babel      ./src/components -d dist --copy-files" },
   "eslintConfig": {
      "extends": "react-app" 
   },
  "browserslist": {
    "production": [
      ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ]
 },
 "devDependencies": {
   "@babel/cli": "^7.5.5",
   "@babel/preset-react": "^7.0.0"
 }
}

5. Publish on npm

1. Register an account if you don’t have one
2. Login from your terminal

• Provide your username and password

npm login

3. Transpile code from Es6 to Es5

npm run publish:npm

4. Publish Package

npm publish

Your package has been published

Updating Package

npm version <updated_version>
npm publish

Testing and Uninstalling Packages

Check my next blog on how to test package locally and uninstall the npm package

Testing npm package locally

Happy Coding 💻