{"id":17242606,"url":"https://github.com/robinweser/react-css-component","last_synced_at":"2025-04-14T03:25:19.897Z","repository":{"id":65412036,"uuid":"124711313","full_name":"robinweser/react-css-component","owner":"robinweser","description":"Injecting CSS via React Components","archived":false,"fork":false,"pushed_at":"2018-03-12T11:01:09.000Z","size":66,"stargazers_count":94,"open_issues_count":3,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-11T12:41:09.028Z","etag":null,"topics":["css","css-in-js","inline-css","react-component","reusable-components"],"latest_commit_sha":null,"homepage":"","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/robinweser.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}},"created_at":"2018-03-11T00:54:48.000Z","updated_at":"2024-01-19T20:26:56.000Z","dependencies_parsed_at":"2023-01-23T10:55:01.396Z","dependency_job_id":null,"html_url":"https://github.com/robinweser/react-css-component","commit_stats":null,"previous_names":["rofrischmann/react-css-component"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Freact-css-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Freact-css-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Freact-css-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Freact-css-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robinweser","download_url":"https://codeload.github.com/robinweser/react-css-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248814604,"owners_count":21165791,"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","css-in-js","inline-css","react-component","reusable-components"],"created_at":"2024-10-15T06:13:39.019Z","updated_at":"2025-04-14T03:25:19.879Z","avatar_url":"https://github.com/robinweser.png","language":"JavaScript","readme":"# CSS via Components\n\nA single React component to inject CSS with ease.\u003cbr\u003e\nIt works with SSR (even using React 16's [renderToNodeStream](https://reactjs.org/docs/react-dom-server.html#rendertonodestream)) and client-side rendering out-of-the-box.\u003cbr\u003e\nIt also provides an *optional* optimisation path.\n\n\u003cimg alt=\"TravisCI\" src=\"https://travis-ci.org/rofrischmann/react-css-component.svg?branch=master\"\u003e \u003ca href=\"https://codeclimate.com/github/rofrischmann/react-css-component/coverage\"\u003e\u003cimg alt=\"Test Coverage\" src=\"https://codeclimate.com/github/rofrischmann/react-css-component/badges/coverage.svg\"\u003e\u003c/a\u003e \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/react-css-component.svg\"\u003e \u003cimg alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/react-css-component.svg\"\u003e \u003cimg alt=\"dependencies\" src=\"https://david-dm.org/rofrischmann/react-css-component.svg\"\u003e\n\n## Support Me\nIf you're using [Robin Frischmann](https://rofrischmann.de)'s packages, please consider supporting his [Open Source Work](https://github.com/rofrischmann) on [**Patreon**](https://www.patreon.com/rofrischmann).\n\n## Installation\n```sh\n# yarn\nyarn add react-css-component\n\n# npm\nnpm i --save react-css-component\n```\n\u003e **Caution**: It requires `react` and `prop-types` to be present.\n\n## Why?\nThis package was created as a possible solution to a [question](https://twitter.com/kentcdodds/status/972268883339108352) by [Kent C. Dodds](https://twitter.com/kentcdodds).\u003cbr\u003e\nCreating resuable React components in general is pretty easy, but adding styling is not. The simplest way is to just use [inline style](https://reactjs.org/docs/dom-elements.html#style), which works pretty well for many basic components. Yet, it is very limited. Neither do we have have pseudo classes nor do we have media queries.\u003cbr\u003e\nSo, at some point, we need actual CSS. We could include a CSS file, but that would require an additional build step e.g. using [Webpack](https://webpack.js.org) in combination with its [css-loader](https://github.com/webpack-contrib/css-loader). While this would work, it's not very compelling to enforce a certain build tool, just to use a single component.\u003cbr\u003e\nAlright, how about [CSS in JS](http://michelebertoli.github.io/css-in-js/)? Using plain JavaScript to style the component sounds great, as the component is written in JavaScript anyways. But, [most CSS in JS solutions are way to big to depend on](https://github.com/hellofresh/css-in-js-perf-tests#bundle-sizes). They're built for applications, not for independent reusable components. Yet, we can still benefit from writing our CSS in JavaScript. This package is the attempt to provide the smallest universal solution for inlining CSS in JavaScript possible.\n\n## How?\nDepending on whether [universal rendering](#universalrendering) (server-side rendering with client-side rehydration) or [client-side only rendering](#clientrendering) is used, the implementation uses a different logic.\n\n### Universal Rendering\n**Server Rendering**: The [UniversalStyle](#style) component renders a primitive *style* DOM element that uses `dangerouslySetInnerHTML` to inject a CSS string.\u003cbr\u003e\n**Client Rehydration**: At first, the [UniversalStyle](#style) component just gets rehydrated to match the server-side markup. But, as soon as it is about to unmount, the *style* element is copied to the `document.head` **once**. This will ensure it's existence just in case any other component using it's CSS is still visible.\n\n#### Caveat\nDuring server-side rendering, the [UniversalStyle](#style) component is not able to track it's own occurence, which may result in duplicate *style* elements. **This won't break anything, but also is not optimal**. To ensure that each [UniversalStyle](#style) instance is only rendered once, we need an unique cache on every render. This is achieved by passing a simple cache via React's context feature. Check the [StyleCacheProvider](#stylecacheprovider) component for more information.\n\n### Client-Only Rendering\nIf we only render on the client-side anyways, we can skip that complex flow and just use the [ClientStyle](#style).\u003cbr\u003e\nIt simply injects a *style* element into the `document.head` on instantiation and tracks its occurence using a global cache.\n\n\u003e **Note**: The [ClientStyle](#style) component won't throw with server-side rendering, but it simply doesn't render styles.\n\n## When?\nIt is important to point out, that this component does not fit for every use case.\u003cbr\u003e\nIt is especially built to be used for resuable shared components: If you're building a small React component and want to share it on npm, this is the perfect solution to add styling without having any additional setup on the user-side.\u003cbr\u003e\nBut, it should be used with caution when building applications. It does **not** solve common CSS problems such as specificity issues, global namespace conflicts or autoprefixing. Consider using a [CSS in JS library](http://michelebertoli.github.io/css-in-js/), [CSS Modules](https://github.com/css-modules/css-modules) or whatever tool is actually built with full applications in mind. \n\n\n## Style\nThis component is the core component and is used to inject the CSS.\u003cbr\u003e\nBoth the universal and the client-only version share the exact same API.\n\n### Props\n\n| Parameter | Type | Description |\n| --- | --- | --- |\n| css | (*string*) | A CSS string that is rendered |\n\n### Import\n```javascript\n// universal rendering\nimport { UniversalStyle as Style } from 'react-css-component'\n\n// client-only rendering\nimport { ClientStyle as Style } from 'react-css-component'\n```\n\n### Example\n```javascript\nconst css = `\n  .button {\n    background-color: darkblue;\n    padding: 20px 10px;\n    font-size: 16px;\n    color: white\n  }\n\n  .button:hover {\n    background-color: blue\n  }\n`\n\n// return an array to colocate style and the button\nconst Button = () =\u003e [\n  \u003cStyle css={css} /\u003e\n  \u003cbutton className=\"button\"\u003eClick Me!\u003c/button\u003e\n]\n```\n\n## StyleCacheProvider\nThe StyleCacheProvider is used to prevent duplication. It is not required, but recommended.\u003cbr\u003e\nIt should wrap your whole application and is only required once, no matter how many components use the [Style](#style) component.\u003cbr\u003e\nIt does not alter the resulting DOM structure as it simply renders its children.\u003cbr\u003e\nIt passes an empty cache object via React's context feature.\n\n\u003e **Tip**: If you're using the [UniversalStyle](#style) component for a reusable shared component, make sure to inform your users about the caveat of not using this component.\n\n### Example\n```javascript\nimport { StyleCacheProvider } from 'react-css-component'\n\nconst App = () =\u003e (\n  \u003cStyleCacheProvider\u003e\n    \u003cButton /\u003e\n  \u003c/StyleCacheProvider\u003e\n)\n```\n\n## License\nreact-css-component is licensed under the [MIT License](http://opensource.org/licenses/MIT).\u003cbr\u003e\nDocumentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).\u003cbr\u003e\nCreated with ♥ by [@rofrischmann](http://rofrischmann.de).\n","funding_links":["https://www.patreon.com/rofrischmann"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinweser%2Freact-css-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobinweser%2Freact-css-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinweser%2Freact-css-component/lists"}