style-r v1.0.8

StyleR - Styler for React

npm install style-r

StyleR provides you yet another styling way in JS.

Use StyleR with React.

Features

• Style mixin
• States (eg.:hover) supported
• Media queries supported
• Keyframes supported (using Radium util)
• Autoprefix (using Radium util)

Usage

Basic

Define style

var style = StyleR.define({
  display: 'block',
  marginTop: '30px',
  fontSize: '1.2em'
});

Set className to HTML element

render() {
  return (
    <p className={style.className()}>
      Lorem ipsum
    </p>
  );
}

Using states

Define style

var style = StyleR.define({
  opacity: 0,
  transition: 'opacity .3s',
  ':hover': {
    opacity: 1
  }
});

Set className to HTML element

render() {
  return (
    <p className={style.className()}>
      Lorem ipsum
    </p>
  );
}

Using className modifier

Define style

var style = StyleR.define({
  display: 'block',
  '.isHidden': {
    display: 'none'
  }
});

Set className to HTML element

render() {
  return (
    <p className={style.className({isHidden: this.state.isHidden})}>
      Lorem ipsum
    </p>
  );
}

Using media queries

Define style

var style = StyleR.define({
  display: 'block',
  '@media screen and (max-width:320px)': {
    display: 'none'
  }
});

Set className to HTML element

render() {
  return (
    <p className={style.className()}>
      Lorem ipsum
    </p>
  );
}

Also, you can generate media query

ES6 syntax

var devices = {
  mobile: StyleR.mediaQuery({
    type: 'screen',
    maxWidth: '320px'
  }),
  desktop: StyleR.mediaQuery({
    type: 'screen',
    minWidth: '1050px'
  })
}

var style = StyleR.define({
  color: 'white',
  [devices.mobile]: {
    color: 'green'
  },
  [devices.desktop]: {
    color: 'blue'
  }
});

Nesting style

Define style

var style = StyleR.define({
  color: 'white',
  opacity: 0,
  '.isFoo': {
    color: 'red'
  },
  '.isBar': {
    opacity: 1,
    '.isFoo': {
      color: 'yellow'
    }
  }
});

Set className to HTML element

render() {
  return (
    <p className={style.className({isFoo: state.isFoo, isBar: state.isBar})}>
      Lorem ipsum
    </p>
  );
}

Keyframes

Same usage as Radium.

var keyframes = StyleR.keyframes({
  '0%': {width: '10%'},
  '50%': {width: '50%'},
  '100%': {width: '10%'}
});

var style = styleR.define({
  animation: keyframes + ' 3s ease 0s infinite'
});