Skip to content
/ npm-react-package Public template

Develop & publish React or Typescript packages with ease. PostCSS, Vitest & Storybook support out of the box. Integrates with Github releases and automatically publishes to NPM. Code is built using tsup.

License

Notifications You must be signed in to change notification settings

enesdir/npm-react-package

Repository files navigation

📦 React • Typescript • Package Starter

A slightly opinionated starter kit for developing React and/or TypeScript packages. It comes with a several pre-configured tools, so you could focus on coding instead of configuring a project for the nth time. From building to releasing a package, this starter kit has you covered.

licence-badge GitHub language count Repository size GitHub last commit

ReactJS Vite prettier-badge Commitizen friendly-badge

Table of Contents

Features

This project setup will include following features.

  • ⚡ Blazing fast dev server and build
  • 🚓 Test & Publish via Github Actions CI/CD workflows for your package. Run tests on every commit plus integrate with Github Releases to automate publishing package to NPM and Storybook to Github Pages.
  • 🧙‍♂️ Developer experience improved with ESLint, Prettier and Husky
  • 🤖 Conventional Commit Lint — Make sure you & your teammates follow conventional commit

Built With

Vitest React

Dev Dependencies

Package Description
Typescript TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
tsup The simplest and fastest way to bundle your TypeScript libraries. Used to bundle package as ESM and CJS modules. Supports TypeScript, Code Splitting, PostCSS, and more out of the box.
Vitest A testing framework for JavaScript. Preconfigured to work with TypeScript and JSX.
Storybook Storybook is a frontend workshop for building UI components and pages in isolation.
Husky Git hook management
Conventional Commit A specification for adding human and machine readable meaning to commit messages.
Commitlint Lint commit messages
Commitizen Using a standardized set of rules to write commits, makes commits easier to read, and enforces writing descriptive commits.
Lint Staged Run linters against staged git files and don't let 💩 slip into your code base!
ESLint A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
Prettier An opinionated code formatter

Installation & Usage

Prerequisites

  • node >=18.4.0
  • npm >=9.x.x

Install

Create the project using this link Create a new repository

clone your project

git clone https://github.com/[YOUR-ACCOUNT-NAME]/[YOUR-PROJECT-NAME].git

Access the project directory.

cd [YOUR-PROJECT-NAME]

Install dependencies.

npm install

Serve with hot reload at http://localhost:6006.

npm run storybook

Commands

Command Description
npm run dev Starts the server in dev mode
npm run lint Runs ESLint on the project
npm run lint-staged Runs Prettier on only staged (changed) files
npm run type-check Runs TSC
npm run build Runs build production bundle to 'dist' directly

License

This project uses MIT license: License

About

Develop & publish React or Typescript packages with ease. PostCSS, Vitest & Storybook support out of the box. Integrates with Github releases and automatically publishes to NPM. Code is built using tsup.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published