Create React Package in Typescript in 5 Minutes

Posted on | In | Comments:

Setup a react npm package to share components or other modules in 5 minutes, without getting hands dirty.

react to npm

A lot of tutorials online use webpack or even create-react-app to setup a react package. There are drawbacks for those methods:

  • The babel-* dependencies bundle doesn’t come for free and usually hard to understand
  • webpack.config.js and .babelrc could be hard to get them right

This tutorial gives you a silly simple way to create a react package without those drawbacks but the benefit from TypeScript: build time type checking (You can opt-out this benefit by writting just JavaScript). Which means your package is born with TypeScript support.

Jump to Source Code.

Setup

Create folders and files

1
2
mkdir -p react-greeting/src  # create folder
cd react-greeting  # go inside the folder

Initialize yarn and add dependencies

1
2
yarn init -y
yarn add -D react typescript @types/react

Minimal setup only requires react and typescript, @types/react is here to make your life even easier.

Add tsconfig.json with

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "compilerOptions": {
    "outDir": ".",
    "module": "commonjs",
    "target": "esnext",
    "lib": [ "es2017", "dom" ],
    "jsx": "react",
    "moduleResolution": "node",
    "declaration": true,
    "esModuleInterop": true,
    "noImplicitAny": false,
    "removeComments": true
  },
  "files": [
    "src/index.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Optional but recommended

Add README.md and LICENSE

1
touch README.md LICENSE  # update content as you like

Add .gitignore with

1
2
3
4
node_modules/
/*.js
/*.d.ts
yarn-error.log

Initialize git

1
2
3
git init
git add --all
git commit -m "Initial commit"

Develop

Create src/index.ts with

1
2
3
4
5
import Greeting from './Greeting'

export {
  Greeting as default
}

Create src/Greeting.tsx with

1
2
3
4
5
6
7
8
9
10
11
import React from 'react'

interface Props {
  name?: string  // who to greet?
}

export default ({ name='world' }: Props) => {
  return (
    <h1>Hello {name}!</h1>
  )
}

This creates a Greeting component which could pass in an optional prop name, then render a h1 element with a greeting message. (Obviously!)

Build

Update package.json with scripts and types so it looks like this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "react-greeting",
  "version": "1.0.0",
  "main": "index.js",
  "types": "index.d.ts",
  "license": "MIT",
  "scripts": {
    "build": "tsc"
  },
  "devDependencies": {
    "@types/react": "^16.8.8",
    "react": "^16.8.4",
    "typescript": "^3.3.3333"
  }
}

scripts add a convenient script to build the package, types indicates where to find type definition file.

Build package

1
yarn build

This builds out several *.js and *.d.ts, those are the only files which are actually needed to be packaged and published.

Publish

Add .npmignore with

1
2
3
4
5
6
7
# Ignore unnecessary files
node_modules/
src/
tsconfig.json
package-lock.json
yarn.lock
yarn-error.log

Publish to npm

1
yarn publish --access public

DONE~!

DONE

Test

Testing is not included in this post for simplicity, but there are two major tests you could do with your new component.

Unit Test

Checkout Jest and Enzyme to write unit test inside your package.

Here is an example unstated-typescript

Integrated Test

Test the package inside a react app using yarn link technique.