❤
npm
Sign UpSign In

radium-plugin-validity-pseudos

1.0.0 • Public • Published

radium-plugin-validity-pseudos

Radium plugin to enable the :valid and :invalid pseudo selectors."

Example:

{
  ':valid': {borderColor: 'black'},
  ':invalid': {borderColor: 'red'}
}

Usage

radium-plugin-validity-pseudos should be added directly before Radium.Plugins.prefix. 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 validityPseudosPlugin = require('radium-plugin-validity-pseudos');
 
function ConfiguredRadium(component) {
  return Radium({
    plugins: [
      Radium.Plugins.mergeStyleArray,
      Radium.Plugins.checkProps,
      Radium.Plugins.resolveMediaQueries,
      Radium.Plugins.resolveInteractionStyles,
 
      validityPseudosPlugin,
 
      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 {
  // ...
}

Readme

Keywords

Package Sidebar

Install

npm i radium-plugin-validity-pseudos

Repository

github.com/ianobermiller/radium-plugin-validity-pseudos

Homepage

github.com/ianobermiller/radium-plugin-validity-pseudos#readme

Weekly Downloads

1

Version

1.0.0

License

MIT

Last publish

Collaborators

  • ianobermiller
Try on RunKit
Report malware