NPM Publish react components

Publish React components at NPM website

Basic build

This tutorial will bs using yarn. You may change to npm as you wish. The rollup pack will be using this time.

Structure

Folder Structure


📂 .
├── package.json     
├── README.md        
├── rollup.config.mjs
├─┬ 📂 src # our components  
│ ├── 📂 components 
│ │ ├── counter.tsx  
│ │ └── myButton.tsx
│ └── index.ts       
├─┬ 📂 testing-web # For testing our components  
│ ├── index.html     
│ ├── package.json   
│ ├── 📂 public      
│ ├── 📂 src
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ └── vite.config.ts
└── tsconfig.json

1. Setup package.json

package.json


{
  "name": "react-npm-test-reemo-new",
  "version": "1.0.1",
  "description": "",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "license": "MIT",
  "author": "reemo",
  "homepage": "https://github.com",
  "repository": "https://github.com",
  "scripts": {
    "build": "rimraf dist && tsc",
    "build-roll": "rimraf dist && rollup -c",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "files": [
    "/dist"
  ],
  "keywords": [
    "react",
    "tsx"
  ],
  "devDependencies": {
    "@babel/core": "^7.22.1",
    "@rollup/plugin-babel": "^6.0.3",
    "@rollup/plugin-commonjs": "^25.0.0",
    "@rollup/plugin-node-resolve": "^15.1.0",
    "@rollup/plugin-replace": "^5.0.2",
    "@rollup/plugin-typescript": "^11.1.1",
    "@swc/core": "^1.3.62",
    "@types/react": "^18.2.8",
    "@types/react-dom": "^18.2.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup": "^3.24.0",
    "rollup-plugin-filesize": "^10.0.0",
    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-serve": "^2.0.2",
    "rollup-plugin-swc3": "^0.8.2",
    "tslib": "^2.5.3",
    "typescript": "^5.1.3"
  }
}

And install rimraf first.


npm i -g rimraf

2. Setup tsconfig.json

To state that there are several config to notices.

"outDir": "./dist": The builded dir for packages
"include": [...]: The file / folders that will build to src in tsc runtime
"exclude": [...]: The file / folders that will not builded to src in tsc runtime

tsconfig.json


{
    "compilerOptions": {
        "target": "es2016",
        "strict": true,
        "jsx": "react",
        "declaration": true,
        "esModuleInterop": true,
        "outDir": "dist",
        "module": "es6",
        "moduleResolution": "node",
        "resolveJsonModule": true
    },
    "include": [
        "src"
    ],
    "exclude": [
        "node_modules",
        "testing-web",
        "test",
        "bin",
        "template"
    ]
}

3. components

Let’s create a components folder and a counter.tsx in components.

src/components/counter.tsx


import * as React from "react";
 
export function Counter({ num }:{ num: number}) {
  const [count, setCount] = React.useState(num || 0);
  return (
    <>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </>
  );
}

Also, create a myButton.tsx in components.

src/components/myButton.tsx


import * as React from "react";
 
export function MyButton() {
  return (
    <>
      <button>MyButton</button>
    </>
  );
}

Go back to src, create a index.ts and export the components.

src/utils/index.ts


export { Counter } from "./components/counter";
export { MyButton } from "./components/myButton";

4. Setup `testing-web`

Set up a testing react website for import the components. This time we use vite for create a react runtime.
https://vitejs.dev/guide/

And name the folder testing-web


yarn create vite

5. Setup import to vite

In testing-web/src/App.tsx, delete the preset stuff and import out components.

testing-web/src/App.tsx


import { Counter, MyButton } from "../../src/index"
 
function App() {
  return (
    <>
      <Counter num={10} />
      <MyButton />
    </>
  )
}
 
export default App

Then start the project with yarn start / yarn dev under testing-web folder.

If you can see the components works, means you are ready to go!

6. Build packages

If you succes to run this commend, a dist folder will be generate.


yarn build-roll
 
# The comments is refer to `rollup -c` in `package.json`

7. Publish packages to NPM


npm publish

And done!