Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
NogsMPLS opened this issue Dec 10, 2015 · 1 comment
Open

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

NogsMPLS opened this issue Dec 10, 2015 · 1 comment

Comments

@NogsMPLS
Copy link

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
Copy link

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants