{"id":15634508,"url":"https://github.com/blakeembrey/react-free-style","last_synced_at":"2025-07-09T14:05:50.708Z","repository":{"id":28710896,"uuid":"32231567","full_name":"blakeembrey/react-free-style","owner":"blakeembrey","description":"Make React components easier and more maintainable by using inline style objects","archived":false,"fork":false,"pushed_at":"2023-12-12T07:18:32.000Z","size":869,"stargazers_count":138,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-20T11:44:27.737Z","etag":null,"topics":["css","css-in-js","css-in-react","free-style","react-components","typescript"],"latest_commit_sha":null,"homepage":"","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/blakeembrey.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":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-03-14T20:53:49.000Z","updated_at":"2025-03-30T17:41:28.000Z","dependencies_parsed_at":"2024-06-18T20:11:13.815Z","dependency_job_id":"694907a5-f2a1-4da9-abe9-c839bf707366","html_url":"https://github.com/blakeembrey/react-free-style","commit_stats":{"total_commits":250,"total_committers":8,"mean_commits":31.25,"dds":0.12,"last_synced_commit":"5abaaff5dc0ab4c6306cf438e4b5e192f8e54dd6"},"previous_names":[],"tags_count":74,"template":false,"template_full_name":null,"purl":"pkg:github/blakeembrey/react-free-style","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakeembrey%2Freact-free-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakeembrey%2Freact-free-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakeembrey%2Freact-free-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakeembrey%2Freact-free-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blakeembrey","download_url":"https://codeload.github.com/blakeembrey/react-free-style/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakeembrey%2Freact-free-style/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264473866,"owners_count":23613958,"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","css-in-react","free-style","react-components","typescript"],"created_at":"2024-10-03T10:53:50.953Z","updated_at":"2025-07-09T14:05:50.649Z","avatar_url":"https://github.com/blakeembrey.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Free Style\n\n[![NPM version][npm-image]][npm-url]\n[![NPM downloads][downloads-image]][downloads-url]\n[![Build status][travis-image]][travis-url]\n[![Test coverage][coveralls-image]][coveralls-url]\n[![Bundle size][bundlephobia-image]][bundlephobia-url]\n\n**React Free Style** combines [Free Style](https://github.com/blakeembrey/free-style) with [React.js](https://github.com/facebook/react) by managing the style of React components dynamically. Works with server-side rendering, where only styles of rendered components will print.\n\n## Why?\n\nCheck out why you should be [doing CSS in JS](https://github.com/blakeembrey/free-style#why). This module exposes the API directly to React.js.\n\n**Even more improvements with React Free Style**\n\n- Modular React.js components\n- Style debugging in development mode\n- Fast renders with automatic style for rendered React components\n- Supports universal/isomorphic applications\n\n## Installation\n\n```\nnpm install react-free-style --save\n```\n\n## Usage\n\n### Styled\n\n```js\nimport { styled } from \"react-free-style\";\n\nconst Button = styled(\"button\", {\n  backgroundColor: \"red\",\n});\n\nconst App = () =\u003e {\n  return \u003cButton css={{ color: \"blue\" }}\u003eHello world!\u003c/Button\u003e;\n};\n```\n\n### JSX\n\n```js\n/** @jsx jsx */\n\nimport { jsx } from \"react-free-style\";\n\nconst App = () =\u003e {\n  return (\n    \u003cbutton css={{ color: \"blue\", backgroundColor: \"red\" }}\u003e\n      Hello world!\n    \u003c/button\u003e\n  );\n};\n```\n\n### Imperative\n\n```js\nimport { css, useCss } from \"react-free-style\";\n\n// Creates \"cached CSS\":\nconst style = css({ color: \"red\" });\n// But you can also write `const style = { color: \"red\" }`.\n\nconst Button = () =\u003e {\n  const className = useCss(style);\n\n  return \u003cbutton className={className}\u003eHello world!\u003c/button\u003e;\n};\n```\n\nThis is how the [`styled`](#styled) and [`jsx`](#jsx) work! Knowing how it works can help you when you need to extract the class name for integrating with an existing UI library using `className`.\n\n## Recipes\n\n### Valid Styles\n\nEvery CSS method accepts:\n\n- CSS-in-JS object\n- String, i.e. a class name\n- Cached CSS, created using the `css(...)` method\n- Computed CSS, a function which accepts `Style` and returns a valid style\n- Array of the above\n\n### Composition\n\nComponents created using `styled` expose \"cached CSS\" on the `style` property.\n\n```js\nconst LargeButton = styled(\"button\", [\n  {\n    fontSize: 16,\n  },\n  Button.style,\n  {\n    marginBottom: 8,\n  },\n]);\n```\n\n### Animations\n\nA \"computed CSS\" function can be used to register and use `@keyframes`.\n\n```ts\nimport { css } from \"react-free-style\";\n\nconst style = css((Style) =\u003e {\n  const animationName = Style.registerStyle({\n    $global: true,\n    \"@keyframes \u0026\": styles,\n  });\n\n  return { animationName };\n});\n```\n\n## Themes\n\n### CSS Variables\n\nThe most effective CSS themes I've seen use [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to dynamically change styles.\n\n```js\n// Register this CSS wherever you want the theme to apply, e.g. `:root`.\nconst theme = {\n  \"--color\": \"red\",\n};\n\nconst Button = styled(\"button\", {\n  color: \"var(--color)\",\n});\n\n// Later on you can change the theme.\nconst style = css({\n  \"--color\": \"blue\",\n});\n```\n\n### Context\n\nUse `React.Context` to define a theme and custom components with `css` props.\n\n```js\nconst ThemeContext = React.createContext({\n  color: \"red\",\n});\n\nconst Button = () =\u003e {\n  const theme = React.useContext(ThemeContext);\n\n  return \u003cbutton css={{ color: theme.color }}\u003eHello world!\u003c/button\u003e;\n};\n```\n\n## Rendering\n\nBy default, CSS output is discarded (a \"no op\" useful for testing) because you may have different output requirements depending on the environment.\n\n### Client-side Rendering\n\n`StyleSheetRenderer` is an efficient CSS renderer for browsers.\n\n```js\nimport { StyleSheetRenderer, Context } from \"react-free-style\";\n\n// const renderer = new NoopRenderer();\nconst renderer = new StyleSheetRenderer();\n\nReact.render(\n  \u003cContext.Provider value={renderer}\u003e\n    \u003cApp /\u003e\n  \u003c/Context.Provider\u003e,\n  document.body\n);\n```\n\n### Server-side Rendering\n\n`MemoryRenderer` collects all styles in-memory for output at a later time.\n\n```js\nimport { MemoryRenderer, Context } from \"react-free-style\";\n\n// const renderer = new NoopRenderer();\nconst renderer = new MemoryRenderer();\n\nconst content = ReactDOM.renderToString(\n  \u003cContext.Provider value={renderer}\u003e\n    \u003cApp /\u003e\n  \u003c/Context.Provider\u003e,\n  document.body\n);\n\nconst html = `\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    ${renderer.toString()}\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"content\"\u003e\n      ${content}\n    \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n`;\n```\n\n## License\n\nMIT license\n\n[npm-image]: https://img.shields.io/npm/v/react-free-style.svg?style=flat\n[npm-url]: https://npmjs.org/package/react-free-style\n[downloads-image]: https://img.shields.io/npm/dm/react-free-style.svg?style=flat\n[downloads-url]: https://npmjs.org/package/react-free-style\n[travis-image]: https://img.shields.io/travis/com/blakeembrey/react-free-style.svg?style=flat\n[travis-url]: https://travis-ci.com/github/blakeembrey/react-free-style\n[coveralls-image]: https://img.shields.io/coveralls/blakeembrey/react-free-style.svg?style=flat\n[coveralls-url]: https://coveralls.io/r/blakeembrey/react-free-style?branch=master\n[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/react-free-style.svg\n[bundlephobia-url]: https://bundlephobia.com/result?p=react-free-style\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblakeembrey%2Freact-free-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblakeembrey%2Freact-free-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblakeembrey%2Freact-free-style/lists"}