❤
npm
Sign UpSign In

react-document-style

0.0.1 • Public • Published

react-document-style

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

build status Test coverage NPM version NPM Downloads

  • 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

Readme

Keywords

Package Sidebar

Install

npm i react-document-style

Weekly Downloads

2

Version

0.0.1

License

MIT

Unpacked Size

13.4 kB

Total Files

7

Last publish

Collaborators

  • moyuyc
Try on RunKit
Report malware