Package Exports

styletron-react-core
styletron-react-core/dist/browser.es5.es.js
styletron-react-core/dist/browser.es5.js
styletron-react-core/dist/index.es.js
styletron-react-core/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styletron-react-core) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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});