Steps to create a React Typescript library

Introduction

This post will help you to publish your own react library to npm, so you can reuse your own component and functions.

This post is intended for people who just want to follow the steps without understand the details.

Before st…


This content originally appeared on DEV Community and was authored by AnxinYang

Introduction

This post will help you to publish your own react library to npm, so you can reuse your own component and functions.

This post is intended for people who just want to follow the steps without understand the details.

Before start, You will need to have NPM, Typescript and other common dev dependencies installed

Steps

First, create tsconfig.json file at your project root:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "declaration": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",
    "outDir": "lib/esm",
  },
  "include": [
    "src"
  ],
  "exclude": ["node_modules", "lib"]
}

then run npm init, and modify package.json flie:

...
  "main": "./lib/cjs/index.js",
  "module": "./lib/esm/index.js",
  "types": "./lib/esm/index.d.ts",
  "files": [
    "src"
  ],
  "scripts": {
    "build": "npm run build:esm && npm run build:cjs",
    "build:esm": "tsc",
    "build:cjs": "tsc --module commonjs --outDir lib/cjs",
    "publish": "npm publish"
  },
...
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/node": "16.11.10",
    "@types/react": "^17.0.37"
  },
  "dependencies": {
    "@types/react-dom": "^17.0.11"
  }
...
}

Add .gitignore file if you are using git:

# dependencies
/node_modules

Create src folder and src/index.tsx file:

import React from "react";

export function CheckLib(){
    return <div>Lib Ok</div>
}

Then run npm run build to create the build folder.

Run npm publish to publish your package.

Finally, you can use npm install <your-package-name> to install your library in other project.

You may need to run npm login to login your npm account if you never logged in before.

Notice

I tested this method with a project created by create-next-app. I assume this will work CRA as well.
If you find your project does not run your library, you may need to explore some more complex methods.
I'm using Window for this method, if you're using Mac or other OS you may want to change build script to work with your CLI environment.

Thanks


This content originally appeared on DEV Community and was authored by AnxinYang


Print Share Comment Cite Upload Translate Updates
APA

AnxinYang | Sciencx (2021-11-30T00:46:53+00:00) Steps to create a React Typescript library. Retrieved from https://www.scien.cx/2021/11/30/steps-to-create-a-react-typescript-library/

MLA
" » Steps to create a React Typescript library." AnxinYang | Sciencx - Tuesday November 30, 2021, https://www.scien.cx/2021/11/30/steps-to-create-a-react-typescript-library/
HARVARD
AnxinYang | Sciencx Tuesday November 30, 2021 » Steps to create a React Typescript library., viewed ,<https://www.scien.cx/2021/11/30/steps-to-create-a-react-typescript-library/>
VANCOUVER
AnxinYang | Sciencx - » Steps to create a React Typescript library. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/30/steps-to-create-a-react-typescript-library/
CHICAGO
" » Steps to create a React Typescript library." AnxinYang | Sciencx - Accessed . https://www.scien.cx/2021/11/30/steps-to-create-a-react-typescript-library/
IEEE
" » Steps to create a React Typescript library." AnxinYang | Sciencx [Online]. Available: https://www.scien.cx/2021/11/30/steps-to-create-a-react-typescript-library/. [Accessed: ]
rf:citation
» Steps to create a React Typescript library | AnxinYang | Sciencx | https://www.scien.cx/2021/11/30/steps-to-create-a-react-typescript-library/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts