Skip to content

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

Description

@NogsMPLS

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions