{"id":20766163,"url":"https://github.com/navono/react-comp-lib","last_synced_at":"2026-04-17T04:02:50.839Z","repository":{"id":74497140,"uuid":"351641986","full_name":"navono/react-comp-lib","owner":"navono","description":null,"archived":false,"fork":false,"pushed_at":"2021-03-29T07:46:55.000Z","size":799,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-26T03:36:27.549Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/navono.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2021-03-26T02:47:19.000Z","updated_at":"2021-03-29T07:46:57.000Z","dependencies_parsed_at":"2023-07-14T07:15:55.799Z","dependency_job_id":null,"html_url":"https://github.com/navono/react-comp-lib","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"HarveyD/react-component-library","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/navono%2Freact-comp-lib","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/navono%2Freact-comp-lib/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/navono%2Freact-comp-lib/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/navono%2Freact-comp-lib/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/navono","download_url":"https://codeload.github.com/navono/react-comp-lib/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243093948,"owners_count":20235465,"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":[],"created_at":"2024-11-17T11:21:43.623Z","updated_at":"2025-12-26T04:13:10.118Z","avatar_url":"https://github.com/navono.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Component Library\n\n[![Build status](https://badge.buildkite.com/90ff98db996bb137c5be1bdce666c4b1ce68a25b17af0a6a04.svg?branch=master)](https://buildkite.com/harvey/react-component-library)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)\n\nThis project skeleton was created to help people get started with creating their own React component library using:\n\n- [Rollup](https://github.com/rollup/rollup)\n- [Sass](https://sass-lang.com/)\n- [TypeScript](https://www.typescriptlang.org/)\n\nIt also features:\n\n- [Storybook](https://storybook.js.org/) to help you create and show off your components\n- [Jest](https://jestjs.io/) and [React Testing Library](https://github.com/testing-library/react-testing-library) enabling testing of the components\n\n[**Read my blog post about why and how I created this project skeleton ▸**](https://blog.harveydelaney.com/creating-your-own-react-component-library/)\n\n[Check out this CodeSandbox to see the component library in action ▸](https://codesandbox.io/s/harvey-component-library-example-y2b60)\n\n## Development\n\n### Testing\n\n```\nnpm run test\n```\n\n### Building\n\n```\nnpm run build\n```\n\n### Storybook\n\nTo run a live-reload Storybook server on your local machine:\n\n```\nnpm run storybook\n```\n\nTo export your Storybook as static files:\n\n```\nnpm run storybook:export\n```\n\nYou can then serve the files under `storybook-static` using S3, GitHub pages, Express etc. I've hosted this library at: https://www.harveydelaney.com/react-component-library\n\n### Generating New Components\n\nI've included a handy NodeJS util file under `util` called `create-component.js`. Instead of copy pasting components to create a new component, you can instead run this command to generate all the files you need to start building out a new component. To use it:\n\n```\nnpm run generate YourComponentName\n```\n\nThis will generate:\n\n```\n/src\n  /YourComponentName\n    YourComponentName.tsx\n    YourComponentName.stories.tsx\n    YourComponentName.test.tsx\n    YourComponentName.types.ts\n    YourComponentName.scss\n```\n\nThe default templates for each file can be modified under `util/templates`.\n\nDon't forget to add the component to your `index.ts` exports if you want the library to export the component!\n\n### Installing Component Library Locally\n\nLet's say you have another project (`test-app`) on your machine that you want to try installing the component library into without having to first publish the component library. In the `test-app` directory, you can run:\n\n```\nnpm i --save ../react-component-library\n```\n\nwhich will install the local component library as a dependency in `test-app`. It'll then appear as a dependency in `package.json` like:\n\n```JSON\n  ...\n  \"dependencies\": {\n    ...\n    \"react-component-library\": \"file:../react-component-library\",\n    ...\n  },\n  ...\n```\n\nYour components can then be imported and used in that project.\n\n## Publishing\n\n### Hosting via NPM\n\nFirst, make sure you have an NPM account and are [logged into NPM using the `npm login` command.](https://docs.npmjs.com/creating-a-new-npm-user-account)\n\nThen update the `name` field in `package.json` to reflect your NPM package name in your private or public NPM registry. Then run:\n\n```\nnpm publish\n```\n\nThe `\"prepublishOnly\": \"npm run build\"` script in `package.json` will execute before publish occurs, ensuring the `build/` directory and the compiled component library exist.\n\n### Hosting via GitHub\n\nI recommend you host the component library using NPM. However, if you don't want to use NPM, you can use GitHub to host it instead.\n\nYou'll need to remove `build/` from `.gitignore`, build the component library (`npm run build`), add, commit and push the contents of `build`. [See this branch for an example.](https://github.com/HarveyD/react-component-library/tree/host-via-github)\n\nYou can then install your library into other projects by running:\n\n```\nnpm i --save git+https://github.com/HarveyD/react-component-library.git#branch-name\n```\n\nOR\n\n```\nnpm i --save github:harveyd/react-component-library#branch-name\n```\n\n## Usage\n\nLet's say you created a public NPM package called `harvey-component-library` with the `TestComponent` component created in this repository.\n\nUsage of the component (after the library installed as a dependency into another project) will be:\n\n```TSX\nimport React from \"react\";\nimport { TestComponent } from \"harvey-component-library\";\n\nconst App = () =\u003e (\n  \u003cdiv className=\"app-container\"\u003e\n    \u003ch1\u003eHello I'm consuming the component library\u003c/h1\u003e\n    \u003cTestComponent theme=\"primary\" /\u003e\n  \u003c/div\u003e\n);\n\nexport default App;\n```\n\n[Check out this Code Sandbox for a live example.](https://codesandbox.io/s/harvey-component-library-example-y2b60?file=/src/App.js)\n\n### Using Component Library SASS Variables\n\nI've found that it's helpful to export SASS variables to projects consuming the library. As such, I've added the `rollup-plugin-copy` NPM package and used it to copy the `typography.scss` and `variables.scss` into the `build` directory as part of the Rollup bundle process. This allows you to use these variables in your projects consuming the component library.\n\nFor example, let's say you installed `harvey-component-library` into your project. To use the exported variables/mixins, in a SASS file you would do the following:\n\n```Sass\n@import '~harvey-component-library/build/typography';\n\n.example-container {\n    @include heading;\n\n    color: $harvey-white;\n}\n```\n\n## Additional Help\n\n### Using Alternatives to Sass\n\n#### Less or Stylus\n\nThe Rollup plugin `rollup-plugin-postcss` supports Sass, Less and Stylus:\n\n- For Stylus, install stylus: `yarn add stylus --dev`\n- For Less, install less: `yarn add less --dev`\n\nYou can then remove `node-sass` from your dependencies.\n\n#### CSS Modules\n\nIf you want to use CSS Modules, update `postcss` in `rollup-config.js` to:\n\n```\npostcss({\n  modules: true\n})\n```\n\n#### Styled Components\n\nIf you want to use [`styled-components`](https://styled-components.com/), the changes required are a bit more involved. As such, I've created a branch where I've got `styled-components` working in this component library, [check it out here](https://github.com/HarveyD/react-component-library/tree/styled-components).\n\n### Component Code Splitting\n\nCode splitting of your components is not supported by default.\n\n[Read this section of my blog post](https://blog.harveydelaney.com/creating-your-own-react-component-library/#introducing-code-splitting-optional-) to find out how and why you would enable code splitting of your components. In summary, code splitting enables users to import components in isolation like:\n\n```\nimport TestComponent from 'harvey-component-library/build/TestComponent';\n```\n\nThis can reduce the bundle size for projects using older (CJS) module formats.\n\nYou can check out [this branch](https://github.com/HarveyD/react-component-library/tree/code-splitting) or [this commit](https://github.com/HarveyD/react-component-library/commit/94631be5a871f3b39dbc3e9bd3e75a8ae5b3b759) to see what changes are neccesary to implement it.\n\nPlease note, there's an issue with code splitting and using `rollup-plugin-postcss`. I recommend using `rollup-plugin-sass` instead alongside code splitting.\n\n### Supporting Image Imports\n\nAdd the following library to your component library [@rollup/plugin-image](https://github.com/rollup/plugins/tree/master/packages/image):\n\n```\nnpm i -D @rollup/plugin-image\n```\n\nThen add it to `rollup-config.js`:\n\n```\n...\nplugins:[\n  ...,\n  image(),\n  ...\n]\n...\n```\n\nYou can then import and render images in your components like:\n\n```tsx\nimport logo from \"./rollup.png\";\n\nexport const ImageComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cimg src={logo} /\u003e\n  \u003c/div\u003e\n);\n```\n\n### Supporting JSON Imports\n\nAdd the following library to your component library [@rollup/plugin-json](https://github.com/rollup/plugins/tree/master/packages/json):\n\n```\nnpm i -D @rollup/plugin-json\n```\n\nThen add it to `rollup-config.js`:\n\n```\n...\nplugins:[\n  ...,\n  json(),\n  ...\n]\n...\n```\n\nYou can then import and use JSON as ES6 Modules:\n\n```tsx\nimport data from \"./some-data.json\";\n\nexport const JsonDataComponent = () =\u003e \u003cdiv\u003e{data.description}\u003c/div\u003e;\n```\n\nCheckout the [official Rollup plugin list](https://github.com/rollup/plugins) for additional helpful plugins.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnavono%2Freact-comp-lib","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnavono%2Freact-comp-lib","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnavono%2Freact-comp-lib/lists"}