@rubixibuc/with-styles

with-styles

React style HOC. Supports both plain style objects and style objects computed from passed props.

Getting Started

Installing

npm i @rubixibuc/with-styles

Usage

without props

import React from 'react';
import withStyles from '@rubixibuc/with-styles';

const MyComponent = ({styles}) => <div style={styles.myDiv}/>;

export default withStyles({
  myDiv: {
    height: 500,
    width: 500
  }
})(MyComponent);

with props

import React from 'react';
import withStyles from '@rubixibuc/with-styles';

const MyComponent = ({styles}) => <div style={styles.myDiv}/>;

export default withStyles(({someProp}) => ({
  myDiv: {
    height: someProp.height,
    width: someProp.width
  }
}))(MyComponent);

with recompose

import React from 'react';
import withStyles from '@rubixibuc/with-styles';
import { compose } from 'recompose';

export const enhance = compose(
  withState('backgroundColor', 'updateBackgroundColor', '#fff'),
  withStyles(({backgroundColor}) => ({
    myDiv: {
      backgroundColor
    }
  }))
)