React Library Template (TypeScript)

Instantly create TypeScript-based React Component Library with this open-source template repo.

Get Started

To use this repo template properly, please make sure you update the following files in your repo.

./
  AUTHORS
  MAINTAINERS

  src/
    components/        // Your React Components here

Step 1 - Login to NPM

To get started, you must have an account with npmjs.com. If you don't have an account, you can sign up for one here: https://www.npmjs.com/signup. Then, login into your npm account using CLI.

npm login

Step 2 - Update package.json

Update package.json with your NPM package information. Please make sure to update the following fields:

File: package.json

{
  "name": "example-react-library",
  "author": "your-username",
  "version": "0.0.0",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/user/repository.git"
  },
  "author": "User Name (https://website.com)",
  "bugs": {
    "url": "https://github.com/user/repository/issues"
  },
  "homepage": "https://github.com/user/repository#readme"
}

Tip: Do a Quick Search to find a package name that's unique and available.

Step 3 - Build & Deploy

Use the following command to build your components into dist folder, that is automatically created in build process.

yarn build

Once, you're done building, you can deploy your package to NPM Registry by running the following command in CLI.

npm publish

Step 4 - Update

To update the NPM Package, increase the version number in package.json.

{
  "version": "0.1.0"
}

And run the following command in CLI to publish an update for your NPM package.

npm publish

Step 5 - Install new Component Library.

Once, the package is published, you can run the following command in CLI to install the package to any React project:

npm i example-react-library

OR -

yarn add example-react-library

Replace example-react-library with the name of your NPM package.

Step 6 - Use the new Component Library.

Once, you have installed the new React component library, you can use it in your project by importing it in your App.js or any .js / .jsx files.

+ import { Box } from "example-react-library";
import "./App.css";

function App() {
  return (
    <div className="App">
+      <Box>A Component from my new React Library</Box>
    </div>
  );
}

export default App;

Contributing

We'd love to accept your patches and contributions to this project. There are just a few guidelines you need to follow.

Code of Conduct

This project follows Contributor Covenant as it's Code of Conduct, and we expect all project participants to adhere to it. Please read the full guide so that you can understand what actions will not be tolerated.

Contributing Guide

Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to project.

LICENSE

This project is licensed under the MIT License, meaning that you're free to modify, distribute, and / or use it for any commercial or private project.