How to use styletron-react - 10 common examples

To help you get started, we’ve selected a few styletron-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github styletron / styletron / packages / flow-type-tests / inferred-deep-composition.js View on Github external
// @flow

import * as React from "react";
import {styled, withStyle, withWrapper} from "styletron-react";

// Note: explicit generic annotation is here because this is not inferred correctly
const Foo = styled<{foo: "foo"}>("div", (_props: {foo: "foo"}) => ({
  color: "red",
}));

// $FlowFixMe
; // Missing foo

// $FlowFixMe
; // Wrong foo

;

const Bar = withStyle(Foo, (_props: {bar: "bar"}) => ({color: "red"}));

// $FlowFixMe
; // Missing foo
// $FlowFixMe
github styletron / styletron / packages / flow-type-tests / with-wrapper-typed.js View on Github external
// @flow

import * as React from "react";
import {styled, withStyle, withWrapper} from "styletron-react";

const Foo = styled("div", (props: {foo: "foo"}) => ({
  color: props.foo,
}));
const Bar = withWrapper(
  Foo,
  StyledComponent => (props: {foo: "foo", bar: "bar"}) => (
    <div>
      
    </div>
  ),
);

// $FlowFixMe
; // missing foo and bar

// $FlowFixMe
; // missing bar
github styletron / styletron / packages / flow-type-tests / with-wrapper.js View on Github external
// @flow

import * as React from "react";
import {styled, withWrapper} from "styletron-react";

const Foo = styled("div", {color: "red"});
const Bar = withWrapper(Foo, StyledComponent =&gt; props =&gt; (
  <div>
    
  </div>
));

;
github styletron / styletron / packages / flow-type-tests / inferred-deep-composition.js View on Github external
// $FlowFixMe
; // Missing foo
// $FlowFixMe
; // Wrong foo
// $FlowFixMe
; // Missing bar
// $FlowFixMe
; // Wrong bar
// $FlowFixMe
; // Missing baz
// $FlowFixMe
; // Wrong baz

;

const Qux = withStyle(Baz, (_props: {qux: "qux"}) =&gt; ({color: "red"}));

// $FlowFixMe
; // Missing foo
// $FlowFixMe
; // Wrong foo
// $FlowFixMe
; // Missing bar
// $FlowFixMe
; // Wrong bar
// $FlowFixMe
; // Missing baz
// $FlowFixMe
; // Wrong baz
// $FlowFixMe
; // Missing qux
// $FlowFixMe
github styletron / styletron / packages / flow-type-tests / with-wrapper-typed.js View on Github external
),
);

// $FlowFixMe
; // missing foo and bar

// $FlowFixMe
; // missing bar

// $FlowFixMe
; // missing foo

;

const Baz = withStyle(Bar, (props: {foo: "foo", bar: "bar", baz: "baz"}) =&gt; ({
  color: props.baz,
}));

// $FlowFixMe
; // Missing foo
// $FlowFixMe
; // Wrong foo
// $FlowFixMe
; // Missing bar
// $FlowFixMe
; // Wrong bar
// $FlowFixMe
; // Missing baz
// $FlowFixMe
; // Wrong baz
github DefinitelyTyped / DefinitelyTyped / types / styletron-react / styletron-react-tests.tsx View on Github external
// withWrapper()
// --------------------------

const PrettyButton = styled('button', { background: 'green' });

const { Consumer } = React.createContext(true);

const WithWrapped = withWrapper(PrettyButton, Styled =&gt; props =&gt; (
    {value =&gt; }
));

;

// Style composition still works as normal;
const StyledWithWrapper = withStyle(WithWrapped, { background: 'red' });

;

// 
// --------------------------

const engineNoop = (arg: any) =&gt; (arg ? '' : '');

const engine: StandardEngine = {
    renderStyle: engineNoop,
    renderKeyframes: engineNoop,
    renderFontFace: engineNoop,
};

const App = () =&gt; (
github DefinitelyTyped / DefinitelyTyped / types / styletron-react / styletron-react-tests.tsx View on Github external
;

// withStyle()
// --------------------------

// Static Styles
const WithStyledSimple = withStyle(BasicStyled, { color: 'blue' });

;

// Dynamic Styles
interface WithStyledDynamicProps {
    $crushed: boolean;
}

const WithStyledDynamic = withStyle(BasicStyled, (props: WithStyledDynamicProps) =&gt; ({
    letterSpacing: props.$crushed ? '-5px' : '0',
}));

;

// withStyleDeep()
// --------------------------

// Static Styles
const WithStyledDeepSimple = withStyleDeep(BasicStyled, { color: 'blue' });

;

// Dynamic Styles
interface WithStyledDeepDynamicProps {
    $crushed: boolean;
github styletron / styletron / packages / flow-type-tests / inferred-deep-composition.js View on Github external
import {styled, withStyle, withWrapper} from "styletron-react";

// Note: explicit generic annotation is here because this is not inferred correctly
const Foo = styled&lt;{foo: "foo"}&gt;("div", (_props: {foo: "foo"}) =&gt; ({
  color: "red",
}));

// $FlowFixMe
; // Missing foo

// $FlowFixMe
; // Wrong foo

;

const Bar = withStyle(Foo, (_props: {bar: "bar"}) =&gt; ({color: "red"}));

// $FlowFixMe
; // Missing foo
// $FlowFixMe
; // Wrong foo
// $FlowFixMe
; // Missing bar
// $FlowFixMe
; // Wrong bar

;

const Baz = withStyle(Bar, (_props: {baz: "baz"}) =&gt; ({color: "red"}));

// $FlowFixMe
; // Missing foo
github DefinitelyTyped / DefinitelyTyped / types / styletron-react / styletron-react-tests.tsx View on Github external
renderKeyframes: engineNoop,
    renderFontFace: engineNoop,
};

const App = () =&gt; (
    
        
    
);

;

// 
// --------------------------

const debug = new DebugEngine();

const DevApp = () =&gt; (
    
        
    
);

;

// useStyletron()
// --------------------------

const [css] = useStyletron();

<div>;
</div>
github styletron / styletron / packages / flow-type-tests / with-wrapper-typed.js View on Github external
// @flow

import * as React from "react";
import {styled, withStyle, withWrapper} from "styletron-react";

const Foo = styled("div", (props: {foo: "foo"}) =&gt; ({
  color: props.foo,
}));
const Bar = withWrapper(
  Foo,
  StyledComponent =&gt; (props: {foo: "foo", bar: "bar"}) =&gt; (
    <div>
      
    </div>
  ),
);

// $FlowFixMe
; // missing foo and bar

// $FlowFixMe
; // missing bar

// $FlowFixMe
; // missing foo

styletron-react

React bindings for Styletron

MIT
Latest version published 1 year ago

Package Health Score

62 / 100
Full package analysis

Similar packages