{"id":13400381,"url":"https://github.com/FormidableLabs/radium","last_synced_at":"2025-03-14T06:31:39.665Z","repository":{"id":25597101,"uuid":"29031987","full_name":"FormidableLabs/radium","owner":"FormidableLabs","description":"A toolchain for React component styling.","archived":true,"fork":false,"pushed_at":"2022-08-19T13:33:58.000Z","size":3228,"stargazers_count":7372,"open_issues_count":83,"forks_count":308,"subscribers_count":148,"default_branch":"master","last_synced_at":"2025-03-12T21:03:17.115Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://formidable.com/open-source/radium/","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/FormidableLabs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE-examples.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-09T19:35:59.000Z","updated_at":"2025-03-04T10:44:33.000Z","dependencies_parsed_at":"2022-07-10T15:00:27.824Z","dependency_job_id":null,"html_url":"https://github.com/FormidableLabs/radium","commit_stats":null,"previous_names":[],"tags_count":63,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fradium","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fradium/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fradium/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fradium/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FormidableLabs","download_url":"https://codeload.github.com/FormidableLabs/radium/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243293794,"owners_count":20268142,"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-07-30T19:00:51.407Z","updated_at":"2025-03-14T06:31:39.202Z","avatar_url":"https://github.com/FormidableLabs.png","language":"JavaScript","readme":"[![Maintenance Status][maintenance-image]](#maintenance-status)\n[![Travis Status][trav_img]][trav_site]\n[![AppVeyor Status][appveyor_img]][appveyor_site]\n[![Coverage Status][cov_img]][cov_site]\n[![NPM Package][npm_img]][npm_site]\n[![Dependency Status][david_img]][david_site]\n![gzipped size][size_img]\n\n# Radium\n\n```sh\nyarn add radium\n# or\nnpm install --save radium\n```\n\nRadium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.\n\n_Inspired by_ \u003ca href=\"https://speakerdeck.com/vjeux/react-css-in-js\"\u003eReact: CSS in JS\u003c/a\u003e\nby \u003ca href=\"https://twitter.com/Vjeux\"\u003evjeux\u003c/a\u003e.\n\n## Maintenance Status\n\n**Archived:** This project is no longer maintained by Formidable. We are no longer responding to issues or pull requests unless they relate to security concerns. We encourage interested developers to fork this project and make it their own!\n\n## Overview\n\nEliminating CSS in favor of inline styles that are computed on the fly is a powerful approach, providing a number of benefits over traditional CSS:\n\n- Scoped styles without selectors\n- Avoids specificity conflicts\n- Source order independence\n- Dead code elimination\n- Highly expressive\n\nDespite that, there are some common CSS features and techniques that inline styles don't easily accommodate: media queries, browser states (:hover, :focus, :active) and modifiers (no more .btn-primary!). Radium offers a standard interface and abstractions for dealing with these problems.\n\nWhen we say expressive, we mean it: math, concatenation, regex, conditionals, functions–JavaScript is at your disposal. Modern web applications demand that the display changes when data changes, and Radium is here to help.\n\nFor a short technical explanation, see [How does Radium work?](#how-does-radium-work).\n\n## Features\n\n- Conceptually simple extension of normal inline styles\n- Browser state styles to support `:hover`, `:focus`, and `:active`\n- Media queries\n- Automatic vendor prefixing\n- Keyframes animation helper\n- ES6 class and `createClass` support\n\n## Docs\n\n- [Overview][docs_guides]\n- [API Docs][docs_api]\n- [Frequently Asked Questions (FAQ)][docs_faq]\n\n## Usage\n\nStart by wrapping your component class with `Radium()`, like `export default Radium(Component)`, or `Component = Radium(Component)`, which works with classes, `createClass`, and stateless components (functions that take props and return a ReactElement). Then, write a style object as you normally would with inline styles, and add in styles for interactive states and media queries. Pass the style object to your component via `style={...}` and let Radium do the rest!\n\n```jsx\n\u003cButton kind=\"primary\"\u003eRadium Button\u003c/Button\u003e\n```\n\n```jsx\nimport Radium from 'radium';\nimport React from 'react';\nimport color from 'color';\n\nclass Button extends React.Component {\n  static propTypes = {\n    kind: PropTypes.oneOf(['primary', 'warning']).isRequired\n  };\n\n  render() {\n    // Radium extends the style attribute to accept an array. It will merge\n    // the styles in order. We use this feature here to apply the primary\n    // or warning styles depending on the value of the `kind` prop. Since its\n    // all just JavaScript, you can use whatever logic you want to decide which\n    // styles are applied (props, state, context, etc).\n    return (\n      \u003cbutton style={[styles.base, styles[this.props.kind]]}\u003e\n        {this.props.children}\n      \u003c/button\u003e\n    );\n  }\n}\n\nButton = Radium(Button);\n\n// You can create your style objects dynamically or share them for\n// every instance of the component.\nvar styles = {\n  base: {\n    color: '#fff',\n\n    // Adding interactive state couldn't be easier! Add a special key to your\n    // style object (:hover, :focus, :active, or @media) with the additional rules.\n    ':hover': {\n      background: color('#0074d9')\n        .lighten(0.2)\n        .hexString()\n    }\n  },\n\n  primary: {\n    background: '#0074D9'\n  },\n\n  warning: {\n    background: '#FF4136'\n  }\n};\n```\n\n## Importing Radium\n\nAs of `v0.22.x`, Radium is built as an ECMAScript Modules-first project. We now have a `package.json:module` entry pointing to our library files with `import|export` statements instead of CommonJS `require`s. We still support CommonJS `require`s with a special `package.json:main` entry pointing to root `index.js` to smooth over this transition. The basic takeaways are:\n\nIf you are using **ESM** with **webpack** or **`@std/esm`** with **Node.js**, imports like the following work fine without any gotchas:\n\n```js\nimport Radium from 'radium';\nimport Radium, {Style} from 'radium';\n```\n\nIf you are using **CommonJS** with **Node.js** or **webpack@1** requires work like normal:\n\n```js\nconst Radium = require('radium');\nconst {Style} = require('radium');\n```\n\nIf you are using **CommonJS** with **webpack@2+**, however, you must instead add `.default` to the root `Radium` object import:\n\n```js\nconst Radium = require('radium').default; // CHANGED: Must add `.default`\nconst {Style} = require('radium'); // Works as per normal\n```\n\nIf you cannot change the `require` statements directly (say Radium is included from a different library your project depends on) you can manually tweak the Radium import in your project's webpack configuration with the following:\n\n```js\nresolve: {\n  alias: {\n    radium: require.resolve('radium/index');\n  }\n}\n```\n\nwhich will allow `const Radium = require('radium');` to still work. The configuration effectively forces webpack to point to code from `package.json:main` (which points to `/index.js`) instead of what is in `package.json:module`.\n\n_Note:_ Radium uses `Reflect` which is not supported in IE11. You will need to bring in a polyfill like [CoreJs](https://github.com/zloirock/core-js#ecmascript-reflect) in order to support \u003cIE11.\n\n## Examples\n\nTo see the universal examples:\n\n```\nnpm install\nnpm run universal\n```\n\nTo see local client-side only examples in action, do this:\n\n```\nnpm install\nnpm run examples\n```\n\n## How does Radium work?\n\nFollowing is a short technical explanation of Radium's inner workings:\n\n- Wrap the `render` function\n- Recurse into the result of the original `render`\n- For each element:\n  - Add handlers to props if interactive styles are specified, e.g. `onMouseEnter` for `:hover`, wrapping existing handlers if necessary\n  - If any of the handlers are triggered, e.g. by hovering, Radium calls `setState` to update a Radium-specific field on the components state object\n  - On re-render, resolve any interactive styles that apply, e.g. `:hover`, by looking up the element's key or ref in the Radium-specific state\n\n## More with Radium\n\nYou can find a list of other tools, components, and frameworks to help you build with Radium on our [wiki](https://github.com/FormidableLabs/radium/wiki). Contributions welcome!\n\n## Contributing\n\nPlease see [CONTRIBUTING](https://github.com/FormidableLabs/radium/blob/master/CONTRIBUTING.md)\n\n[trav_img]: https://api.travis-ci.com/FormidableLabs/radium.svg\n[trav_site]: https://travis-ci.com/FormidableLabs/radium\n[cov_img]: https://img.shields.io/coveralls/FormidableLabs/radium.svg\n[cov_site]: https://coveralls.io/r/FormidableLabs/radium\n[npm_img]: https://img.shields.io/npm/v/radium.svg\n[npm_site]: https://www.npmjs.org/package/radium\n[david_img]: https://img.shields.io/david/FormidableLabs/radium.svg\n[david_site]: https://david-dm.org/FormidableLabs/radium\n[size_img]: https://badges.herokuapp.com/size/npm/radium/dist/radium.min.js?gzip=true\u0026label=gzipped\n[docs_guides]: https://github.com/FormidableLabs/radium/tree/master/docs/guides\n[docs_api]: https://github.com/FormidableLabs/radium/tree/master/docs/api\n[docs_faq]: https://github.com/FormidableLabs/radium/tree/master/docs/faq\n[appveyor_img]: https://ci.appveyor.com/api/projects/status/github/formidablelabs/radium?branch=master\u0026svg=true\n[appveyor_site]: https://ci.appveyor.com/project/ryan-roemer/radium\n[maintenance-image]: https://img.shields.io/badge/maintenance-archived-red.svg\n","funding_links":[],"categories":["Uncategorized","Code Design","JavaScript","库","React [🔝](#readme)"],"sub_categories":["Uncategorized","CSS / Style"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFormidableLabs%2Fradium","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFormidableLabs%2Fradium","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFormidableLabs%2Fradium/lists"}