Using Radium with ES6 components

[fredericlb]

Hi,

I wrote a class that when inherited allows creating component in an ES6 fashion. This class triggers different parts of Radium.wrap during its lifecycle, so it's quite dirty but here it is :

import {Component} from 'react';
import {wrap} from 'radium';

class RadiumComponent extends Component {

    constructor(props, opts) {
        super(props, opts);
        if (this.state) {
            this.state._radiumStyleState = {};
        } else {
            this.state = { _radiumStyleState: {} };
        }
    }

    componentWillUnmount() {
        super.componentWillUnmount();

        if (this._radiumMouseUpListener) {
            this._radiumMouseUpListener.remove();
        }

        if (this._radiumMediaQueryListenersByQuery) {
            Object.keys(this._radiumMediaQueryListenersByQuery).forEach(
                function (query) {
                    this._radiumMediaQueryListenersByQuery[query].remove();
                },
                this
            );
        }
    }

    renderWithStyles() {
        console.error("renderWithStyles should be defined by your component");
        return null;
    }

    render(){
        var renderedElement = this.renderWithStyles();
        return wrap({render: () => renderedElement }).render();
    }
}

export default RadiumComponent ;

Your component just needs to implement a renderWithStyles method.
I'm not doing a PR as this is clearly a draft, and I don't know if you're interested in this in the short-term.
Including it in the project would allow for a cleaner implementation, since hacky calls to wrap would not be needed anymore.

Moreover, I don't know if classes and modules works well with JSX-loader.

[alexlande]

Thank @fredericlb! We definitely want to get Radium compatible with ES6 classes, but to be honest I haven't given it a ton of thought yet.

For a bit more context, we've discussed this a little in #87 and #65.

@ianobermiller: any thoughts on this now that wrap has landed?

[ianobermiller]

Yes, I like where this is going. I am planning to convert nuclearmail to ES6 classes soon, and I'll probably have a PR for Radium then. I am thinking of moving most of the wrap functionality into a separate helper, and then having the wrap and ES6 versions use the same code. We could either have a special base class, like RadiumComponent, or use the enhancer pattern, like this: https://github.com/nmn/react-observe/blob/master/src/index.js.

I think @vjeux outlined some other options, I can't recall them now, so there may be something even better.