styletron-react-core

React bindings for Styletron, inspired by styled-components.

This package provides the core implementation that is agnostic of the shape style objects and the engine interface.

Installation

yarn add styletron-react-core

API

The styletron-react-core package consists of the following named exports:

• createStyled
• withStyle
• withStyleDeep
• withTransform
• withWrapper

Customizing styled

createStyled

import {createStyled} from "styletron-react-core";

Returns a styled function.

Params

1. opts

• opts.getInitialStyle: (void => Style)
• opts.driver: ((Style, Engine) => string)
• opts.wrapper: (StatelessFunctionalComponent<*> => StatelessFunctionalComponent<*>)

Examples

import {createStyled} from "styletron-react-core";
 
type customStyleT = $Shape<{
  angle?: number,
  velocity?: number
}>;
 
interface CustomEngine {
  someMethod: customStyleT => string;
}
 
function driver(style: customStyleT, engine: CustomEngine): string {
  return engine.someMethod(style);
}
 
function getInitialStyle(): customStyleT {
  return {};
}
 
const wrapper = StyledComponent => props => (
  <div>
    <StyledComponent {...props} />
  </div>
);
 
const styled = createStyled({getInitialStyle, driver, wrapper});