Component template

Here is a basic, incomplete template you can use for creating new components. It will not render or even compile. But it's well-constructed, ready for adapting to your own needs. It's shown here as a stateless functional component, which should be trivial to convert to a class component.

It doesn't include every possible option. Regardless, it's a good starting point for stamping out new components.

import React from 'react';
import {Styled} from 'styletron-themer';

const staticStyle = {};

function dynamicStyle({props, componentTheme}) {
  return Object.assign({}, componentTheme,
    props.goesToEleven && {color: 'red'}
  );
}

function MyComponent(inputProps) {
  return (
    <Styled
      themeName    = "MyComponent"
      staticStyle  = {staticStyle}
      dynamicStyle = {dynamicStyle}
      {...inputProps}
    >
      {(className, props) => {
        const {goesToEleven, ...otherProps} = props;
        return (
          <span {...otherProps} className = {className}>
            {inputProps.children}
          </span>
        );
      }}
    </Styled>
  );
}

results matching ""

    No results matching ""