Make ReactCSS either a high order component or a decorator about reactcss HOT 3 CLOSED

A couple things I've seen using react-css in production:

classes method gets huge, quick. this could be a side effect of having too large of classes in the first place, but what i like about inline styles is that the styles are defined with the component. what i found was that we ended up with these huge classes functions defining all of these styles and they became unwieldy fast.

i think class components themselves tend to become really large. i've started using stateless components which make composing components much easier. i'm not sure how these work with the current API of ReactCSS (i know v2 was on the horizon at some point).

i haven't looked into the technical details, but something like radium's api: https://github.com/FormidableLabs/radium#usage is interesting because i could do something like:

const MyStatelessComponent = () => {
      const styles = {text: {color: 'black'}};
      return <div><span style={styles.text}>"hi"</span></div>;
}

export { MyStatelessComponent };
export Radium(MyStatelessComponent);

if ReactCSS is a HoC we could do the same thing which would definitely be interesting.

from reactcss.

While switching over to ReactCss for my personal website, I created a basic higher-order component, see https://gist.github.com/nheyn/ac4f4200313fd34d81ee.

It is a little bit of a hack, I had to make a "dummy Component" to bind to the inline(...) function. It was the only way to get the classes object from the Component (that was passed to the higher-order component) and return it from this.classes(...) in inline(...).

Other then that, it's similar to Component.js. The main differences are:

• The css(...) method is added to the props of the passed in Component
• The css(...) method (now a prop) must be passed the classes object (I added it as the 1st argument)
• The styles(...) method must always be defined

Here is one of the Components (with some simplifications) that uses the higher-order component:

import React from 'react';
import useStyles from '../useStyles';

const Section = React.createClass({
  contextTypes: {
    screenSize: React.PropTypes.string.isRequired
  },
  styles() {
    const { screenSize } = this.context;

    return this.props.css(this.classes(), {
      smallScreen: screenSize === 'xs' || screenSize === 'sm'
    });
  },
  classes() {
    return {
      'default': {
        section: {
          position: 'absolute',
          left: '10%',
          right: '10%',
          heynioColors: 'default'
        }
      },
      'smallScreen': {
        section: {
          left: 0,
          right: 0
        }
      }
    };
  },
  render() {
    const style = this.styles();

    return (
      <section style={style.section}>
        {this.props.children}
      </section>
    );
  }
});

export default useStyles(Section);

from reactcss.

The API has been changed in 1.0.0 to make this unnecessary!

from reactcss.