JSPM – motion-style@4.0.3

Package Exports

motion-style

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (motion-style) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Motion Style

Higher order component for styling components. Uses Aphrodite to extract everything to stylesheets. Uses motion-nice-style to provide some nice helpers for styles.

Applies styles in the static style object to the render elements based on tags and $ props.

Example:

import styler from 'motion-style'

const style = styler({
  theme: true,
  themeKey: 'theme'
})

@style class extends React.Component {
  render() {
    return (
      <name>
        <h1 $black $bg="#fff">Test</h1>
      </name>
    )
  }

  static style = {
    name: {
      flex: 1,
    },
    h1: {
      fontSize: 22,
      transform: {
        rotate: '45deg',
      },
      border: [1, 'solid', '#ccc'],
      color: [255, 255, 255],
    },
    black: {
      color: 'black',
    },
    bg: color => ({
      background: color,
      borderBottom: [2, 'solid', color]
    }),
  }
}

Themes

Use themes and themeProps to easily theme an entire component a different way. themeProps will accept boolean props.

@style class Title extends React.Component {
  render() {
    return (
      <base>
        <h1>Test</h1>
      </base>
    )
  }

  static themeProps = ['big']

  static style = {
    base: {
      padding: 10,
    },
    h1: {
      fontSize: 22,
    },
    theme: {
      big: {
        base: {
          padding: 20,
        },
        h1: {
          fontSize: 50,
        }
      },
      tint: color => ({
        base: {
          background: [color, 0.5],
        },
        h1: {
          color,
        },
      }),
    },
  }
}


// Use
React.render(<Title big tint="yellow" />, document.getElementById('app'))

Parent Styles

Helpful for maintaining a common set of styles for every component. Use $$ to access, to keep things explicit.

@style.parent({
  row: {
    flexFlow: 'row',
  },
})
@style
class extends React.Component {
  render() {
    return (
      <div $$row>
        <h1>Test1</h1>
        <h1>Test2</h1>
      </div>
    )
  }

  static style = {
    div: {
      background: 'yellow',
    },
  }
}