radium
A toolchain for React component styling.
An archived React library that lets you write component styles as plain JavaScript objects instead of CSS files, adding hover states, media queries, and auto vendor prefixes that inline styles normally lack, no longer maintained.
Radium is an archived JavaScript library for React applications that replaces CSS stylesheets with inline styles written directly in JavaScript. It is no longer maintained by Formidable, the company that built it, and the repository is not accepting new pull requests or issues except for security concerns. Interested developers are encouraged to fork the project.
The library works by wrapping a React component with a Radium function call, after which you write your styles as plain JavaScript objects instead of in a separate CSS file. Because the styles are JavaScript, you can use any programming logic to decide which styles apply: comparisons, calculations, and conditional checks based on component state or props.
The main problem Radium addresses is that ordinary inline styles in React do not support CSS features like hover states, focus styles, active states, or media queries. Radium adds those back. You include a key like :hover or @media inside your style object, and Radium intercepts the relevant browser events to apply the correct styles at the right time. It also automatically adds vendor prefixes, which are adjustments some browsers need to recognize certain CSS properties.
The library includes a keyframe animation helper and works with both ES6 class-based components and older React createClass-style components. It supports both modern ES module imports and CommonJS require syntax, though the README notes a configuration difference for webpack version 2 and above that can catch users by surprise.
Radium requires a Reflect polyfill for Internet Explorer 11. Full documentation and API reference were maintained in the repository at the time the project was active.
Where it fits
- Style a React component entirely in JavaScript objects with working hover and focus states, without writing any CSS files.
- Apply styles conditionally based on component props or state using normal JavaScript if-statements instead of CSS class toggling.
- Use media queries inside a JavaScript style object so a component's layout changes at different screen sizes without a stylesheet.