React-document-style NPM

react-document-style

We could render style component either client or server side via react-side-effect.

UMD unpak

Usage

The Component writing like here.

import Style from 'react-document-style'
const css = 'body { color: red; }'

export default () => (
  <Style css={css}>
    <div>
      Hi
      <Style css={'div { color: blue; }'}/>
    </div>
  </Style>
)

Client
Would create a style DOM in head

<head>
<style type="text/css">
body { color: red; }
div { color: blue; }
</style>
</head>

Server
Call rewind or peek to get the css string on server side after render component.
please see the doc about react-side-effect for more information

ReactServerDOM.renderToString(<Style css={'div { color: blue; }'}/>)
Style.peek() // div { color: blue; }
Style.rewind() // div { color: blue; }
Style.peek() // undefined

imcuttle document react side-effect

react-side-effect rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-filesize rollup-plugin-node-resolve rollup-plugin-uglify

@infinitebrahmanuniverse/nolb-react-do @everything-registry/sub-chunk-2551 picidae-theme-haier @zalastax/nolb-react-do

0.0.1

7 years ago

0.0.0

7 years ago