styletron-react-core

React bindings for Styletron

Usage no npm install needed!

<script type="module">
  import styletronReactCore from 'https://cdn.skypack.dev/styletron-react-core';
</script>

README

styletron-react-core

npm version dependencies status

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:

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