formidablelabs/radium

★ 7,348JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((radium))
    Status
      Archived
      Not maintained
      Fork to use
    What it does
      Inline styles in JS
      Hover and focus states
      Media queries in JS
      Auto vendor prefixes
    Tech
      JavaScript
      React
    Features
      Keyframe animations
      Class and createClass support
      CommonJS and ES modules
    Audience
      React developers

mindmap root((radium)) Status Archived Not maintained Fork to use What it does Inline styles in JS Hover and focus states Media queries in JS Auto vendor prefixes Tech JavaScript React Features Keyframe animations Class and createClass support CommonJS and ES modules Audience React developers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Style a React component entirely in JavaScript objects with working hover and focus states, without writing any CSS files.

USE CASE 2

Apply styles conditionally based on component props or state using normal JavaScript if-statements instead of CSS class toggling.

USE CASE 3

Use media queries inside a JavaScript style object so a component's layout changes at different screen sizes without a stylesheet.

Tech stack

JavaScriptReact

Getting it running

Difficulty · easy Time to first run · 30min

This project is archived and no longer maintained, requires a Reflect polyfill for Internet Explorer 11 and a webpack 2+ configuration adjustment.

In plain English

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.

Copy-paste prompts

Prompt 1

Using the formidablelabs/radium library, show me how to wrap a React button component so it changes background color on hover and shrinks on active press, using JavaScript style objects only.

Prompt 2

I have a React component that needs different padding on mobile vs desktop. Show me how to write a Radium style object with a @media query so the layout changes at 768px width.

Prompt 3

Explain how Radium applies vendor prefixes automatically and show me a React component example where a CSS animation uses a keyframe defined with the Radium.keyframes helper.

Prompt 4

Compare writing hover styles in Radium versus modern CSS-in-JS libraries like styled-components or Emotion, and help me migrate a simple Radium component to styled-components.

Open on GitHub → Explain another repo

← formidablelabs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.