react-ts-test v1.0.1

My First NPM Package (react-ts-test)

This repo is the example of the article "How to create and publish React Typescript npm package with demo and automated build".

You can clone it and step by step create your own NPM package and publish it.

It is simple React counter.

Live Demo

Installation:

npm install react-ts-test --save-dev

or

yarn add -D react-ts-test

Usage :

Add MyCounter to your component:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { MyCounter } from 'react-ts-test'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
    <React.StrictMode>
        <div>
            <h2>Default counter</h2>
            <MyCounter />
        </div>
        <hr />
        <div>
            <h2>Counter with predefined value</h2>
            <MyCounter value={5} />
        </div>
    </React.StrictMode>,
)

Possible error when you want to login to npm with below command in WSL:

npm login

solution: (type this command into terminal and then reload vscode)

export PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin

If you start project with above article link and after running npm publish --dry-run see error Module ts-jest in the transform option was not found., you need more packages installation:

Some of these packages should have specific versions. Just pay attention to the error description.

• Jest
• @types/jest
• jest-environment-jsdom
• ts-jest
• React Testing Library
• jest-canvas-mock