{"id":20723273,"url":"https://github.com/ranajahanzaib/react-library-template","last_synced_at":"2026-03-27T02:28:26.575Z","repository":{"id":38422018,"uuid":"417682826","full_name":"ranajahanzaib/react-library-template","owner":"ranajahanzaib","description":"Instantly Create React Component Library \u0026 Publish on NPM","archived":false,"fork":false,"pushed_at":"2024-03-29T11:51:44.000Z","size":1376,"stargazers_count":4,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-12T23:15:50.797Z","etag":null,"topics":["component-library","npm-module","npm-package","react-library","react-library-template"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ranajahanzaib.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-10-16T01:28:56.000Z","updated_at":"2022-05-24T13:19:36.000Z","dependencies_parsed_at":"2023-02-07T03:31:08.741Z","dependency_job_id":"7c8e738f-5a18-4a1c-a23f-2558ac3ac485","html_url":"https://github.com/ranajahanzaib/react-library-template","commit_stats":{"total_commits":11,"total_committers":2,"mean_commits":5.5,"dds":0.2727272727272727,"last_synced_commit":"841ad02cecbce36a20043dfa3c152f4f0f7905d8"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":"ranajahanzaib/npm-package-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranajahanzaib%2Freact-library-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranajahanzaib%2Freact-library-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranajahanzaib%2Freact-library-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranajahanzaib%2Freact-library-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ranajahanzaib","download_url":"https://codeload.github.com/ranajahanzaib/react-library-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224996540,"owners_count":17404487,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","npm-module","npm-package","react-library","react-library-template"],"created_at":"2024-11-17T04:08:09.979Z","updated_at":"2026-03-27T02:28:21.541Z","avatar_url":"https://github.com/ranajahanzaib.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Library Template\n\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](./CONTRIBUTING.md)\n\nInstantly create React Component Library with this open-source template repo.\n\n# Get Started\n\nTo use this repo template properly, _please make sure you update the following files in your repo._\n\n```\n./\n  AUTHORS\n  MAINTAINERS\n\n  src/\n    lib/\n      components/        // Your React Components here\n```\n\n### **Step 1** - Login to NPM\n\nTo 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.\n\n```shell\nnpm login\n```\n\n### **Step 2** - Update `package.json`\n\nUpdate `package.json` with your NPM package information. Please make sure to update the following fields:\n\nFile: `package.json`\n\n```json\n{\n  \"name\": \"react-library-x\",\n  \"author\": \"your-username\",\n  \"version\": \"1.0.0\"\n}\n```\n\n**Tip:** _[Do a Quick Search](https://www.npmjs.com/search?q=isMyUniquePkgNameAvailable) to find a package name that's unique and available._\n\n### **Step 3** - Build \u0026 Deploy\n\nUse the following command to build your components into `dist` folder, that is automatically created in build process.\n\n```shell\nnpm run build\n```\n\nOnce, you're done building, you can deploy your package to [NPM Registry](https://www.npmjs.com/) by running the following command in CLI.\n\n```shell\nnpm publish\n```\n\n### **Step 4** - Update\n\nTo update the NPM Package, increase the version number in `package.json`.\n\n```json\n{\n  \"version\": \"1.0.1\"\n}\n```\n\nAnd run the following command in CLI to publish an update for your NPM package.\n\n```shell\nnpm publish\n```\n\n### **Step 5** - Install new Component Library.\n\nOnce, the package is published, you can run the following command in CLI to install the package to any React project:\n\n```shell\nnpm i react-library-x\n\n - OR -\n\nyarn add react-library-x\n```\n\nReplace `react-library-x` with the name of your NPM package.\n\n### **Step 6** - Use the new Component Library.\n\nOnce, 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.\n\n```diff\n+ import { Box } from \"react-library-x\";\nimport \"./App.css\";\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n+      \u003cBox\u003eA Component from my new React Library\u003c/Box\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n# Contributing\n\nWe'd love to accept your patches and contributions to this project. There are just a few guidelines you need to follow.\n\n### [Code of Conduct](./CODE_OF_CONDUCT.md)\n\nThis project follows [Contributor Covenant](https://www.contributor-covenant.org/)\nas it's Code of Conduct, and we expect all project participants to adhere to it.\nPlease read the [full guide](./CODE_OF_CONDUCT.md) so that you can understand\nwhat actions will not be tolerated.\n\n### [Contributing Guide](./CONTRIBUTING.md)\n\nRead 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.\n\n### [LICENSE](./LICENSE)\n\nThis 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Franajahanzaib%2Freact-library-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Franajahanzaib%2Freact-library-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Franajahanzaib%2Freact-library-template/lists"}