radium-plugin-friendly-pseudos
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'
Usage
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 = ;var friendlyPseudos = ; { return component;} moduleexports = ConfiguredRadium;
Then you just use @ConfiguredRadium
instead of @Radium
. Or ConfiguredRadium(MyComponent)
instead of Radium(MyComponent)
.
@ConfiguredRadium // ...