Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ranajahanzaib/react-library-template
Instantly Create React Component Library & Publish on NPM
https://github.com/ranajahanzaib/react-library-template
component-library npm-module npm-package react-library react-library-template
Last synced: 2 months ago
JSON representation
Instantly Create React Component Library & Publish on NPM
- Host: GitHub
- URL: https://github.com/ranajahanzaib/react-library-template
- Owner: ranajahanzaib
- License: mit
- Created: 2021-10-16T01:28:56.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-29T11:51:44.000Z (10 months ago)
- Last Synced: 2024-10-12T23:15:50.797Z (3 months ago)
- Topics: component-library, npm-module, npm-package, react-library, react-library-template
- Language: HTML
- Homepage:
- Size: 1.31 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Library Template
[](./LICENSE) [](./CONTRIBUTING.md)
Instantly create 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/
lib/
components/ // Your React Components here
```
### **Step 1** - Login to NPM
To get started, you must have an account with [npmjs.com](https://www.npmjs.com/). If you don't have an account, you can sign up for one here: [https://www.npmjs.com/signup](https://www.npmjs.com/signup). Then, login into your npm account using CLI.
```shell
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`
```json
{
"name": "react-library-x",
"author": "your-username",
"version": "1.0.0"
}
```
**Tip:** _[Do a Quick Search](https://www.npmjs.com/search?q=isMyUniquePkgNameAvailable) 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.
```shell
npm run build
```
Once, you're done building, you can deploy your package to [NPM Registry](https://www.npmjs.com/) by running the following command in CLI.
```shell
npm publish
```
### **Step 4** - Update
To update the NPM Package, increase the version number in `package.json`.
```json
{
"version": "1.0.1"
}
```
And run the following command in CLI to publish an update for your NPM package.
```shell
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:
```shell
npm i react-library-x
- OR -
yarn add react-library-x
```
Replace `react-library-x` 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.
```diff
+ import { Box } from "react-library-x";
import "./App.css";
function App() {
return (
+ A Component from my new React Library
);
}
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](./CODE_OF_CONDUCT.md)
This project follows [Contributor Covenant](https://www.contributor-covenant.org/)
as it's Code of Conduct, and we expect all project participants to adhere to it.
Please read the [full guide](./CODE_OF_CONDUCT.md) so that you can understand
what actions will not be tolerated.
### [Contributing Guide](./CONTRIBUTING.md)
Read our [contributing guide](./CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to project.
### [LICENSE](./LICENSE)
This project is licensed under the [MIT License](./LICENSE), meaning that you're free to modify, distribute, and / or use it for any commercial or private project.