glintui
v0.0.0
Published
GlintUI is an opensource React Library
Downloads
1
Maintainers
Readme
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.