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

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

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

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.

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

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

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.

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;

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

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.

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.

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.