{"id":13400355,"url":"https://github.com/transitive-bullshit/create-react-library","last_synced_at":"2025-10-02T23:35:41.841Z","repository":{"id":40003309,"uuid":"123827332","full_name":"transitive-bullshit/create-react-library","owner":"transitive-bullshit","description":"CLI for creating reusable react libraries.","archived":true,"fork":false,"pushed_at":"2023-04-04T16:18:23.000Z","size":4975,"stargazers_count":4778,"open_issues_count":126,"forks_count":300,"subscribers_count":33,"default_branch":"master","last_synced_at":"2024-09-26T10:25:17.207Z","etag":null,"topics":["babel","cli","component","create-react-app","library","preact","react","rollup"],"latest_commit_sha":null,"homepage":"https://transitivebullsh.it/javascript-dev-tools-in-2022","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/transitive-bullshit.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2018-03-04T20:44:14.000Z","updated_at":"2024-09-23T05:44:31.000Z","dependencies_parsed_at":"2024-02-04T16:20:04.744Z","dependency_job_id":"7e766d01-ca8f-4517-8027-8b04a88a358e","html_url":"https://github.com/transitive-bullshit/create-react-library","commit_stats":null,"previous_names":["transitive-bullshit/react-modern-library-cli"],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transitive-bullshit%2Fcreate-react-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transitive-bullshit%2Fcreate-react-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transitive-bullshit%2Fcreate-react-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transitive-bullshit%2Fcreate-react-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/transitive-bullshit","download_url":"https://codeload.github.com/transitive-bullshit/create-react-library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219876112,"owners_count":16554735,"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":["babel","cli","component","create-react-app","library","preact","react","rollup"],"created_at":"2024-07-30T19:00:51.059Z","updated_at":"2025-10-02T23:35:41.515Z","avatar_url":"https://github.com/transitive-bullshit.png","language":"JavaScript","readme":"# 2022 Update\n\nThis tool is no longer actively maintained. I suggest using either [tsup](https://github.com/egoist/tsup), [tsdx](https://github.com/jaredpalmer/tsdx), or [microbundle](https://github.com/developit/microbundle).\n\nHere's an [article](https://transitivebullsh.it/javascript-dev-tools-in-2022#823feddaa1bb4edea19042852b0a5b54) I wrote in April 2022 which should help you decide between these different tools.\n\n# create-react-library\n\n\u003e CLI for creating reusable, modern React libraries using Rollup and create-react-app.\n\n[![NPM](https://img.shields.io/npm/v/create-react-library.svg)](https://www.npmjs.com/package/create-react-library) [![Build Status](https://travis-ci.com/transitive-bullshit/create-react-library.svg?branch=master)](https://travis-ci.com/transitive-bullshit/create-react-library) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Intro\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"600\" src=\"https://cdn.rawgit.com/transitive-bullshit/create-react-library/master/media/demo.svg\"\u003e\n\u003c/p\u003e\n\n## Features\n\n- Easy-to-use CLI\n- Handles all modern JS features\n- Bundles `commonjs` and `es` module formats\n- [create-react-app](https://github.com/facebookincubator/create-react-app) for example usage and local dev\n- [Rollup](https://rollupjs.org/) for bundling\n- [Babel](https://babeljs.io/) for transpiling\n- [Jest](https://facebook.github.io/jest/) for testing\n- Supports complicated peer-dependencies\n- Supports CSS modules\n- Optional support for TypeScript\n- Sourcemap creation\n- Thousands of public modules created\n- Thorough documentation :heart_eyes:\n- [Chinese docs](./readme.zh-CN.md) by [@monsterooo](https://github.com/monsterooo)\n\n## Install globally\n\nThis package requires `node \u003e= 10`.\n\n```bash\nnpm install -g create-react-library\n```\n\n## Usage with npx\n\n```bash\nnpx create-react-library\n```\n\n_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_\n\n## Creating a New Module\n\n```bash\ncreate-react-library\n```\n\nAnswer some basic prompts about your module, and then the CLI will perform the following steps:\n\n- copy over the template\n- install dependencies via yarn or npm\n- link packages together for local development\n- initialize local git repo\n\nAt this point, your new module should resemble this screenshot and is all setup for local development.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"600\" src=\"https://cdn.rawgit.com/transitive-bullshit/create-react-library/master/media/tree.svg\"\u003e\n\u003c/p\u003e\n\n## Development\n\nLocal development is broken into two parts (ideally using two tabs).\n\nFirst, run rollup to watch your `src/` module and automatically recompile it into `dist/` whenever you make changes.\n\n```bash\nnpm start # runs rollup with watch flag\n```\n\nThe second part will be running the `example/` create-react-app that's linked to the local version of your module.\n\n```bash\n# (in another tab)\ncd example\nnpm start # runs create-react-app dev server\n```\n\nNow, anytime you make a change to your library in `src/` or to the example app's `example/src`, `create-react-app` will live-reload your local dev server so you can iterate on your component in real-time.\n\n![](https://media.giphy.com/media/12NUbkX6p4xOO4/giphy.gif)\n\n#### Publishing to npm\n\n```bash\nnpm publish\n```\n\nThis builds `commonjs` and `es` versions of your module to `dist/` and then publishes your module to `npm`.\n\nMake sure that any npm modules you want as peer dependencies are properly marked as `peerDependencies` in `package.json`. The rollup config will automatically recognize them as peers and not try to bundle them in your module.\n\n#### Deploying to Github Pages\n\n```bash\nnpm run deploy\n```\n\nThis creates a production build of the example `create-react-app` that showcases your library and then runs `gh-pages` to deploy the resulting bundle.\n\n## Use with React Hooks\n\nIf you use [react-hooks](https://reactjs.org/docs/hooks-intro.html) in your project, when you debug your example you may run into an exception [Invalid Hook Call Warning](https://reactjs.org/warnings/invalid-hook-call-warning.html). This [issue](https://github.com/facebook/react/issues/14257) explains the reason, your lib and example use a different instance, one solution is rewrite the `react` path in your example's `package.json` to 'file:../node_modules/react' or 'link:../node_modules/react'.\n\n## Examples\n\n### Multiple Named Exports\n\nHere is a [branch](https://github.com/transitive-bullshit/react-modern-library-boilerplate/tree/feature/multiple-exports) which demonstrates how to use multiple named exports. The module in this branch exports two components, `Foo` and `Bar`, and shows how to use them from the example app.\n\n### Material-UI\n\nHere is a [branch](https://github.com/transitive-bullshit/react-modern-library-boilerplate/tree/feature/material-ui) which demonstrates how to make use of a relatively complicated peer dependency, [material-ui](https://github.com/mui-org/material-ui). It shows the power of [rollup-plugin-peer-deps-external](https://www.npmjs.com/package/rollup-plugin-peer-deps-external) which makes it a breeze to create reusable modules that include complicated material-ui subcomponents without having them bundled as a part of your module.\n\n### Boilerplate\n\nThe CLI is based on this [boilerplate](https://github.com/transitive-bullshit/react-modern-library-boilerplate), which you can optionally read about [here](https://hackernoon.com/publishing-baller-react-modules-2b039d84bce7).\n\n### Libraries\n\nHere are some example libraries that have been bootstrapped with `create-react-library`.\n\n- [tabler-react](https://github.com/tabler/tabler-react) - React components and demo for the Tabler UI theme.\n- [react-background-slideshow](https://github.com/transitive-bullshit/react-background-slideshow) - Sexy tiled background slideshow for React 🔥\n- [react-starfield-animation](https://github.com/transitive-bullshit/react-starfield-animation) -Canvas-based starfield animation for React ✨\n- [react-particle-effect-button](https://github.com/transitive-bullshit/react-particle-effect-button) - Bursting particle effect buttons for React 🎉\n- [react-particle-animation](https://github.com/transitive-bullshit/react-particle-animation) - Canvas-based particle animation for React 🌐\n- [react-block-image](https://github.com/transitive-bullshit/react-block-image) - React replacement for img with more control + fallback support 🌃\n- [react-mp3-recorder](https://github.com/transitive-bullshit/react-mp3-recorder) - Microphone recorder for React that captures mp3 audio 🎵\n- [react-before-after-slider](https://github.com/transitive-bullshit/react-before-after-slider) - A sexy image comparison slider for React.\n- [worldwind-react-globe](https://github.com/emxsys/worldwind-react-globe) - NASA WorldWind globe component for React.\n- [react-shimmer](https://github.com/gokcan/react-shimmer) - Shimmer effect for loading images.\n- [react-login-modal-sm](https://github.com/Silind/react-login-modal-sm) - Customizable React social media login modal.\n- [react-gradient-scroll-indicator](https://github.com/jbccollins/react-gradient-scroll-indicator) - Wrapper for scrollable content with gradients.\n- [react-editext](https://github.com/alioguzhan/react-editext) - Editable Text Component.\n- ... and hundreds more!\n\nWant to see a more completed list? Check out [Made with CRL](https://made-with-crl.netlify.com/).\n\nWant to add yours to the list? Submit an [PR](https://github.com/HurricaneInteractive/made-with-crl#adding-a-library) at the _Made with CRL_ repository.\n\n## License\n\nMIT © [Travis Fischer](https://github.com/transitive-bullshit)\n\nSupport my OSS work by \u003ca href=\"https://twitter.com/transitive_bs\"\u003efollowing me on twitter \u003cimg src=\"https://storage.googleapis.com/saasify-assets/twitter-logo.svg\" alt=\"twitter\" height=\"24px\" align=\"center\"\u003e\u003c/a\u003e\n","funding_links":[],"categories":["Uncategorized","JavaScript","React [🔝](#readme)","辅助","脚手架","*.js","目录"],"sub_categories":["Uncategorized","React","\u003ca id=\"cli\"\u003e脚手架\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftransitive-bullshit%2Fcreate-react-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftransitive-bullshit%2Fcreate-react-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftransitive-bullshit%2Fcreate-react-library/lists"}