{"id":22813170,"url":"https://github.com/morewings/react-library-template","last_synced_at":"2025-04-22T16:21:39.712Z","repository":{"id":210085440,"uuid":"725634549","full_name":"morewings/react-library-template","owner":"morewings","description":"Stop configuring, start coding your library. React Library Template makes it happen.","archived":false,"fork":false,"pushed_at":"2025-04-06T08:28:12.000Z","size":6725,"stargazers_count":23,"open_issues_count":4,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T09:25:03.259Z","etag":null,"topics":["css-modules","jest","npm-module","npm-package","postcss","react","storybook","tailwindcss","template-project","typescript","vite"],"latest_commit_sha":null,"homepage":"https://morewings.github.io/react-library-template/","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/morewings.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":"2023-11-30T14:57:56.000Z","updated_at":"2025-04-06T08:28:00.000Z","dependencies_parsed_at":"2023-12-07T09:31:23.467Z","dependency_job_id":"5c10ff7d-9aee-44bc-a5f4-2fb30d020d26","html_url":"https://github.com/morewings/react-library-template","commit_stats":null,"previous_names":["morewings/react-library-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Freact-library-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Freact-library-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Freact-library-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Freact-library-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morewings","download_url":"https://codeload.github.com/morewings/react-library-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250275553,"owners_count":21403680,"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":["css-modules","jest","npm-module","npm-package","postcss","react","storybook","tailwindcss","template-project","typescript","vite"],"created_at":"2024-12-12T12:15:50.850Z","updated_at":"2025-04-22T16:21:39.706Z","avatar_url":"https://github.com/morewings.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![CI](https://github.com/morewings/react-library-template/actions/workflows/merge-jobs.yml/badge.svg)](https://github.com/morewings/react-library-template/actions/workflows/merge-jobs.yml)\n[![Storybook deploy](https://github.com/morewings/react-library-template/actions/workflows/pages.yml/badge.svg)](https://github.com/morewings/react-library-template/actions/workflows/pages.yml)\n[![Use this template](https://img.shields.io/badge/use%20this-template-blue?logo=githu)](https://github.com/morewings/react-library-template/generate)\n\n# React Library Template\n\n[![NPM library Create React App template logo](./design/logo.jpg)](#)\n\nThis template repository is your shortcut to building awesome React components and libraries!\n\nForget about the tedious setup – we've got you covered. Focus on writing your code, and let this template handle the rest.\n\n## Features\n\n- **TypeScript \u0026 JavaScript**: Write your code in the language you prefer.\n- **Blazing fast**: **pnpm** for speedy package management and **Vite** for lightning-fast builds.\n- **Husky** enforces pre-commit hooks, **Eslint** and **Stylelint** will keep your code tidy and consistent.\n- **Jest** and **react-testing-library** help you write robust tests.\n- **Storybook** lets you create interactive demos and docs for your components.\n- **Optional Tailwind CSS**: If you're into it, you can easily enable Tailwind CSS for styling.\n\nSee it in action: [Demo Storybook](https://morewings.github.io/react-library-template/)\n\nThis template is your starting point for building high-quality React libraries. Clone it, customize it, and let's build something amazing!\n\n## Quickstart\n\n### Prerequisites\n\n1. Install **Node** \u003e= 20.x.\n2. Install **pnpm**. E.g. `corepack prepare pnpm@latest --activate`.\n\n\n### Installation\n\nManually clone repo or use `degit`.\n\n```shell script\n# With CSS Modules config\nnpx degit github:morewings/react-library-template my-library\n# With Tailwind CSS config\nnpx degit github:morewings/react-library-template#tailwind my-library\ncd ./my-library\npnpm i\n```\n\n\n## Enable Tailwind CSS\n\nYou can find all changes at this [PR](https://github.com/morewings/react-library-template/pull/161) and [tailwind](https://github.com/morewings/react-library-template/tree/tailwind) branch.\n\n## Improve tree shaking\n\nThe default settings allow modern bundlers such as Vite and esbuild successfully tree-shake unused modules from the bundle.\nUnfortunately there are problems with Next.js and Webpack not capable to tree-shake single file ES Module.\n\nIn order to fix this enable `preserveModules` setting in Rollup options.\n\n```ts\nimport {defineConfig} from 'vite';\n\nexport default defineConfig(() =\u003e ({\n    // ...\n    build: {\n        lib: {\n            // ...\n            fileName: (format, entryName) =\u003e {\n                // Create entry file(s) inside the bundle\n                if (entryName === 'src/lib/index') {\n                    return `index.${format === 'es' ? 'js' : 'cjs'}`;\n                // Organize external dependencies which included in the bundle\n                } else if (entryName.includes('node_modules')) {\n                    return `external/module.${format === 'es' ? 'js' : 'cjs'}`\n                }\n                // Keep other modules in places\n                return `${entryName}.${format === 'es' ? 'js' : 'cjs'}`;\n            },\n            // Change bundle formats to ES Modules and commonJS.\n            // UMD bundle will not work with preserveModules:true\n            formats: ['es', 'cjs'],\n        },\n        rollupOptions: {\n            // ...\n            output: {\n                // ...\n                preserveModules: true,\n            },\n        },\n    },\n}));\n\n```\n\nYou can find all changes at corresponding [PR](https://github.com/morewings/react-library-template/pull/352) and [tree-shaking](https://github.com/morewings/react-library-template/tree/tree-shaking) branch.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorewings%2Freact-library-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorewings%2Freact-library-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorewings%2Freact-library-template/lists"}