{"id":18994801,"url":"https://github.com/flaviodelgrosso/react-library-builder","last_synced_at":"2025-09-06T06:31:46.715Z","repository":{"id":144703260,"uuid":"589614850","full_name":"flaviodelgrosso/react-library-builder","owner":"flaviodelgrosso","description":"Get started with building your own React library using Rollup.js and Storybook with this starter kit","archived":false,"fork":false,"pushed_at":"2023-01-20T22:46:32.000Z","size":2549,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-08T17:40:04.063Z","etag":null,"topics":["boilerplate","library","react","rollupjs","starter-kit","storybook","template"],"latest_commit_sha":null,"homepage":"https://flaviodelgrosso.github.io/react-library-builder/?path=/story/button--default","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/flaviodelgrosso.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-16T14:35:26.000Z","updated_at":"2024-01-22T16:27:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"9a7aecf6-eebe-44ef-b3d5-d7bb95587b21","html_url":"https://github.com/flaviodelgrosso/react-library-builder","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flaviodelgrosso%2Freact-library-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flaviodelgrosso%2Freact-library-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flaviodelgrosso%2Freact-library-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flaviodelgrosso%2Freact-library-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flaviodelgrosso","download_url":"https://codeload.github.com/flaviodelgrosso/react-library-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232098370,"owners_count":18472318,"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":["boilerplate","library","react","rollupjs","starter-kit","storybook","template"],"created_at":"2024-11-08T17:27:07.919Z","updated_at":"2025-01-01T15:43:10.170Z","avatar_url":"https://github.com/flaviodelgrosso.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"react-library-builder.png\" width=\"400px\" /\u003e\n\n# Creating a Custom React Library\n\nCreating a custom React library can be a great way to share reusable components and functionality across multiple projects. This guide will walk you through the process of setting up and developing a library using the React Library Builder.\n\n## Step 1: Set up the Project\n\nFirst, create a new directory for your library and navigate to it in the terminal. Then, clone the React Library Builder repository using the following command:\n\n```bash {1}\ngit clone https://github.com/flaviodelgrosso/react-library-builder.git\ncd react-library-builder\nyarn install\n```\n\nAlternatively, you can download the repository as a zip file of the latest release from [here](https://github.com/flaviodelgrosso/react-library-builder/releases) and extract it to your new directory.\n\nOnce you have the repository downloaded, navigate to the project directory and run the following command to install the necessary dependencies:\n\n```bash\nyarn install\n```\n\n## Step 2: Develop Your Components\n\nNow that your project is set up, you can start developing your custom components. In the `src/components` folder you can start creating a new component file. For example, if you were creating a button component, you would create a file called `Button.tsx` in the `src/components` folder.\n\nAs you develop your components, make sure to update the `src/index.ts` file to include them in your library. This will allow other developers to import and use your components in their own projects.\n\nIt's also important to include a `YourComponent.story.tsx` file for each component you create. This file will allow you to view and test your component in Storybook, a tool for developing and testing UI components.\n\n## Step 3: Style Your Components\n\nThe React Library Builder supports both SCSS and CSS out of the box, so you can style your components as you normally would. If you want to use CSS modules, you can refer to the [rollup-plugin-postcss](https://github.com/egoist/rollup-plugin-postcss) documentation for more information.\n\n## Step 4: Test Your Components\n\nTesting is crucial when developing a library, as it helps ensure that your components work as expected. The React Library Builder uses [Vitest](https://vitest.dev/) and [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) for testing. You can find an example test file in the `Button.spec.tsx` file.\n\nTo run the tests, use the following command:\n\n```bash\nyarn test\n```\n\nTo run the test and show the coverage, use the following command:\n\n```bash\nyarn test:coverage\n```\n\n## Step 5: Linting\n\nLinting is an important step in maintaining code quality, The React Library Builder uses [ESLint](https://eslint.org/) and [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) for linting. You can modify linting rules by overriding them in the `.eslintrc` file.\n\nTo run the linter, use the following command:\n\n```bash\nyarn lint\n```\n\nTo automatically fix linting issues, use the following command:\n\n```bash\nyarn lint:fix\n```\n\n## Step 6: Publishing Your Library\n\nWhen your library is ready, you can publish it to [NPM](https://www.npmjs.com/) so that others can use it in their own projects. Make sure you have an active account with NPM, and that your `.npmrc` file is set up correctly. Also, ensure that the repository URL in the `package.json` file is set to your repository URL. Then, use the following command to release your library:\n\n```bash\nyarn release\n```\n\n## Step 7: Deploy Storybook to GitHub Pages\n\nYou can also deploy your [Storybook](https://storybook.js.org/basics/writing-stories/) to GitHub Pages to make it easier for others to view and test your components. Make sure the repository URL in the `package.json` file is set to your repository URL, then use the following command:\n\n```bash\nyarn deploy\n```\n\n## Additional Scripts\n\n- `yarn start` : Only serves Storybook.\n- `yarn build` : Builds your library (build can be found in dist folder).\n- `yarn storybook:build` : Builds the static Storybook in case you want to deploy it.\n- `yarn eslint`: Runs only the JavaScript linter.\n- `yarn eslint:fix`: Runs only the JavaScript linter and fixes automatic fixable issues.\n- `yarn typecheck`: Runs typescript type checker.\n\n  And that's it! You now have a working React library that you can use in your own projects and share with others. Don't forget to refer to the Storybook documentation for information on custom layouts, styling, and more.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflaviodelgrosso%2Freact-library-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflaviodelgrosso%2Freact-library-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflaviodelgrosso%2Freact-library-builder/lists"}