{"id":21754499,"url":"https://github.com/ranajahanzaib/ts-react-library-template","last_synced_at":"2025-04-13T09:08:46.677Z","repository":{"id":52486081,"uuid":"463325982","full_name":"ranajahanzaib/ts-react-library-template","owner":"ranajahanzaib","description":"Template repo for React Component Library (TypeScript)","archived":false,"fork":false,"pushed_at":"2025-01-25T00:48:59.000Z","size":1587,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T09:08:36.227Z","etag":null,"topics":["package","react-library","typescript-react-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null}},"created_at":"2022-02-24T22:53:46.000Z","updated_at":"2025-01-25T00:48:59.000Z","dependencies_parsed_at":"2022-09-05T14:30:23.856Z","dependency_job_id":"f32ac90c-251d-47d5-a0a6-1bb6031e37f0","html_url":"https://github.com/ranajahanzaib/ts-react-library-template","commit_stats":{"total_commits":4,"total_committers":1,"mean_commits":4.0,"dds":0.0,"last_synced_commit":"fa04ce6dd2f2ea6acb6da81dbb07410ec6ae32ae"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":"ranajahanzaib/opensource","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranajahanzaib%2Fts-react-library-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranajahanzaib%2Fts-react-library-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranajahanzaib%2Fts-react-library-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranajahanzaib%2Fts-react-library-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ranajahanzaib","download_url":"https://codeload.github.com/ranajahanzaib/ts-react-library-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248688565,"owners_count":21145766,"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":["package","react-library","typescript-react-components"],"created_at":"2024-11-26T09:14:08.061Z","updated_at":"2025-04-13T09:08:46.639Z","avatar_url":"https://github.com/ranajahanzaib.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Library Template (TypeScript)\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 TypeScript-based 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    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\": \"example-react-library\",\n  \"author\": \"your-username\",\n  \"version\": \"0.0.0\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/user/repository.git\"\n  },\n  \"author\": \"User Name (https://website.com)\",\n  \"bugs\": {\n    \"url\": \"https://github.com/user/repository/issues\"\n  },\n  \"homepage\": \"https://github.com/user/repository#readme\"\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\nyarn 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\": \"0.1.0\"\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```sh\nnpm i example-react-library\n```\n\nOR -\n\n```sh\nyarn add example-react-library\n```\n\nReplace `example-react-library` 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 \"example-react-library\";\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%2Fts-react-library-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Franajahanzaib%2Fts-react-library-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Franajahanzaib%2Fts-react-library-template/lists"}