Make your own React Library

Sometimes I forgot how to make event like componentDidMount/componentWillMount in functional component.
So I am using custom hook ‘useUnmount’.
And this time I made a new hook ‘useMount’.
I decided make an open source library with both hooks.
This time I will show you how I created my own React NPM Library.

create-react-library

You should install npm package to create a new npm library.

create-react-library

npm install -g create-react-library
npx create-react-library

enzyme

If you need tests for UI Testing, use enzyme.

Introduction

yarn add enzyme enzyme-adapter-react-16
yarn add @types/enzyme

useDidMount.test.ts (Example)

describe('useDidMount', () => {
  it('Mount handler will can be called', () => {
    const renderer = mount(<TestComponent />)
    renderer.mount()
    expect(componentDidMount).toBeCalled()
  })
})

‘Const declarations’ require an initialization value

If you get this error when run tests, install babel preset for typescript.

yarn add @babel/preset-typescript

package.json

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

Support for the experimental syntax ‘jsx’ isn’t currently enabled.

package.json

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

Enzyme expects an adapter to be configured, but found none

setup.ts

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

package.json

"jest": {
  ...
  "setupFiles": [
    "./__tests__/setup.ts"
  ]
}

Github

git push — set-upstream origin main

NPM

npm

Create your NPM Account

Login

You would receive OTP email when you try to login npm.

npm login

npm notice Log in on https://registry.npmjs.org/
Username: 2sem
Password:
Email: (this IS public) 
Enter one-time password from your authenticator app: 41822193
Logged in as 2sem on https://registry.npmjs.org/.

Publish

npm publish

npm notice
npm notice 📦  react-functional-mount@1.0.0
npm notice === Tarball Contents ===
npm notice 746B  README.md
npm notice 75B   dist/__tests__/src/useDidMount.test.d.ts
npm notice 75B   dist/__tests__/src/useWillUnmount.test.d.ts
npm notice 142B  dist/index.d.ts
npm notice 391B  dist/index.js
npm notice 686B  dist/index.js.map
npm notice 355B  dist/index.modern.js
npm notice 692B  dist/index.modern.js.map
npm notice 12B   dist/index.test.d.ts
npm notice 142B  dist/src/index.d.ts
npm notice 75B   dist/useDidMount.test.d.ts
npm notice 2.4kB package.json
npm notice === Tarball Details ===
npm notice name:          react-functional-mount
npm notice version:       1.0.0
npm notice filename:      react-functional-mount-1.0.0.tgz
npm notice package size:  2.0 kB
npm notice unpacked size: 5.8 kB
npm notice shasum:        de24bedcf5eb4722ca323a8838d64df8c0040885
npm notice integrity:     sha512-ZQ7ieDqt3agy4[...]wNhNzT0ZZAgSQ==
npm notice total files:   12
npm notice
+ react-functional-mount@1.0.0

Install

Install your published npm libary.

yarn add react-functional-mount

yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
...
...
...
└─ react-functional-mount@1.0.0
$ husky install
husky - Git hooks installed
✨  Done in 9.67s.

NPM Page

You can find your published library immediately on NPM site.

react-functional-mount

Version Up

If you want publish new version, run this command.
This will modify your package.json automatically.

npm version 1.0.1

v1.0.1

Publish your library again.

npm publish

After 1 day… 43 Downloads. Amazing!