markdalgleish / react-themeable

Utility for making React components easily themeable
548 stars 14 forks source link

[Question] How to handle React.createElement and variants? #4

Open NogsMPLS opened 8 years ago

NogsMPLS commented 8 years ago

Having some trouble understanding how to implement react-themeable on a more complex example. Here's an example of a button component that could be either a <button> or an <a>, and has multiple variant style options (note: I am using CSS Modules):

import React, { Component } from 'react';
import classNames from 'classnames/bind';
import style from './style.css';

class Button extends Component {
    render () {
        //destructured props
        const {href, primary, secondary, success, warning, ...others} = this.props;

        //determine what element to use based on if href was passed in
        const element = href ? 'a' : 'button';

        //use ClassNames package to determine variant style to use, primary being default
        var cx = classNames.bind(style);
        let className = cx({
            primary_outline: !secondary && !success && !warning,
            secondary: secondary,
            success_outline: success,
            warning_outline: warning
        });

        //append this.props.className if passed in
        if (this.props.className) className += ` ${this.props.className}`;

        //make props variable to hold and send into React.createElement
        const props = {
        ...others,
        href,
        className
        }

        //create element
        return React.createElement(element, props, children);
    }
}

I'm having trouble implementing theme into the const props object. I tried:

const props = {
     theme: theme(1, 'button')
}

But that didn't work, said 'button' didn't exist.

I'm also unsure how to apply variant possibilities into the second theme parameter.

...Unless, instead of making a single <Button /> component, it instead makes more sense to create, say, <ButtonPrimary />, <ButtonSecondary />, etc. But that seems a little overkill?

If these things aren't possible yet, I'm willing to see what I can to to contribute to make them possible, but want to make sure it's not my own ignorance before diving into source.

martinbethann commented 7 years ago

@NogsMPLS Were you able to figure this out? I'm hoping to implement a themer that allows variants but I'm running into trouble. Thanks.