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.
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):I'm having trouble implementing theme into the
const props
object. I tried: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.