typestyle-react
Simplified integration between TypeStyle and React.
Installation
npm install --save typestyle-react# or yarn add typestyle-react
API
styled
;
Create a React component with styles applied.
; ; // Renders a `<span class="…">…</span>`, where `class` is computed by TypeStyle.;
Components pass-through supported props, so they can be used the same as the unstyled originals.
element = ;
Caveats:
- If
className
is passed, its value will be merged with the TypeStyle computed value. - Using
ref
will expose the wrapped component, useinnerRef
to access the inner element.
Parameterised Styles
Styling can be parameterised, and be passed values via props. Instead of passing
an CSSNestedProperties
object to styled
, pass a function:
; ; // Styled props passed via the special `styled` prop.;
Hint: Don't confuse the styled
prop with the native style
prop.
style
;
A wrapper around TypeStyle's style
export that schedules forceRenderStyles()
in a microtask.
; ; ;
StyleSheet flushing to DOM
Styles are computed (via TypeStyle) when the component is rendered, and are immediately scheduled to be flushed to the DOM synchronously.