:hover
, :focus
, and :active
createClass
supportRadium()
, 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!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:@std/esm
with Node.js, imports like the following work fine without any gotchas:.default
to the root Radium
object import: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: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
.Reflect
which is not supported in IE11. You will need to bring in a polyfill like CoreJs in order to support <IE11.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 state