Radium plugin for easier to type pseudo classes. Converts nested style objects with keys like onHover
to the format Radium expects, :hover
. These are a bit more natural to type in JavaScript. Note that this will transform all keys that look like onSomething, but Radium only supports a limited subset of pseudos, namely onActive
, onFocus
, and onHover
.
Example:
{
onActive: {color: 'blue'},
onHover: {color: 'red'},
onFocus: {color: 'yellow'}
}
Becomes
{
':active': {color: 'blue'},
':hover': {color: 'red'},
':focus': {color: 'yellow'}
}
radium-plugin-friendly-pseudos
should be added directly before Radium.Plugins.resolveInteractionStyles
. Radium plugins are setup by passing a config object to @Radium
. Since you'll probably want to use this plugin everywhere you use Radium, you can create your own module with a configured version of Radium:
ConfiguredRadium.js
var Radium = require('radium');
var friendlyPseudos = require('radium-plugin-friendly-pseudos');
function ConfiguredRadium(component) {
return Radium({
plugins: [
Radium.Plugins.mergeStyleArray,
Radium.Plugins.checkProps,
Radium.Plugins.resolveMediaQueries,
friendlyPseudos,
Radium.Plugins.resolveInteractionStyles,
Radium.Plugins.prefix,
Radium.Plugins.checkProps,
]
})(component);
}
module.exports = ConfiguredRadium;
Then you just use @ConfiguredRadium
instead of @Radium
. Or ConfiguredRadium(MyComponent)
instead of Radium(MyComponent)
.
@ConfiguredRadium
class MyComponent extends Component {
// ...
}