Name: radium
Owner: Formidable
Description: A toolchain for React component styling.
Created: 2015-01-09 19:35:59.0
Updated: 2018-01-18 08:08:09.0
Pushed: 2018-01-18 14:36:49.0
Homepage: http://formidable.com/open-source/radium/
Size: 1970
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
install radium
Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.
Inspired by React: CSS in JS by vjeux.
Eliminating CSS in favor of inline styles that are computed on the fly is a powerful approach, providing a number of benefits over traditional CSS:
Despite 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.
When 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.
For a short technical explanation, see How does Radium work?.
:hover
, :focus
, and :active
createClass
supportStart 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!
ton kind="primary">Radium Button</Button>
sx
rt Radium from 'radium';
rt React from 'react';
rt color from 'color';
s Button extends React.Component {
atic propTypes = {
kind: PropTypes.oneOf(['primary', 'warning']).isRequired
nder() {
// Radium extends the style attribute to accept an array. It will merge
// the styles in order. We use this feature here to apply the primary
// or warning styles depending on the value of the `kind` prop. Since its
// all just JavaScript, you can use whatever logic you want to decide which
// styles are applied (props, state, context, etc).
return (
<button
style={[
styles.base,
styles[this.props.kind]
]}>
{this.props.children}
</button>
);
on = Radium(Button);
ou can create your style objects dynamically or share them for
very instance of the component.
styles = {
se: {
color: '#fff',
// Adding interactive state couldn't be easier! Add a special key to your
// style object (:hover, :focus, :active, or @media) with the additional rules.
':hover': {
background: color('#0074d9').lighten(0.2).hexString()
}
imary: {
background: '#0074D9'
rning: {
background: '#FF4136'
As 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:
If you are using ESM with webpack or @std/esm
with Node.js, imports like the following work fine without any gotchas:
rt Radium from 'radium';
rt Radium, { Style } from 'radium';
If you are using CommonJS with Node.js or webpack@1 requires work like normal:
t Radium = require('radium');
t { Style } = require('radium');
If you are using CommonJS with webpack@2+, however, you must instead add .default
to the root Radium
object import:
t Radium = require('radium').default; // CHANGED: Must add `.default`
t { Style } = require('radium'); // Works as per normal
If 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:
lve: {
ias: {
radium: require.resolve("radium/index")
which 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
.
To see the universal examples:
install
run universal
To see local client-side only examples in action, do this:
install
run examples
Following is a short technical explanation of Radium's inner workings:
render
functionrender
onMouseEnter
for :hover
, wrapping existing handlers if necessarysetState
to update a Radium-specific field on the components state object:hover
, by looking up the element's key or ref in the Radium-specific stateYou can find a list of other tools, components, and frameworks to help you build with Radium on our wiki. Contributions welcome!
Please see CONTRIBUTING