Skip to content

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

@NogsMPLS

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.

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