https://github.com/imcuttle/react-document-style

Document style component on client or server side
https://github.com/imcuttle/react-document-style

react react-document-title server-sider

Last synced: about 2 months ago
JSON representation

Document style component on client or server side

• Host: GitHub
• URL: https://github.com/imcuttle/react-document-style
• Owner: imcuttle
• License: mit
• Created: 2018-02-23T06:09:19.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-01-07T14:01:41.000Z (over 4 years ago)
• Last Synced: 2025-10-06T01:21:11.521Z (9 months ago)
• Topics: react, react-document-title, server-sider
• Language: JavaScript
• Size: 65.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: Readme.md
  • License: License

Awesome Lists containing this project

README

          
# react-document-style  

We could render style component either client or server side via [`react-side-effect`](https://github.com/gaearon/react-side-effect).

[![build status](https://img.shields.io/travis/imcuttle/react-document-style/master.svg?style=flat-square)](https://travis-ci.org/imcuttle/react-document-style)

[![Test coverage](https://img.shields.io/codecov/c/github/imcuttle/react-document-style.svg?style=flat-square)](https://codecov.io/github/imcuttle/react-document-style?branch=master)

[![NPM version](https://img.shields.io/npm/v/react-document-style.svg?style=flat-square)](https://www.npmjs.com/package/react-document-style)

[![NPM Downloads](https://img.shields.io/npm/dm/react-document-style.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/react-document-style)

- UMD  

name: `ReactDocumentStyle`  

requires `React` and `PropTypes`

- https://unpkg.com/react-document-style  

- https://cdn.jsdelivr.net/npm/react-document-style

## Usage

The Component writing like here.

```javascript

import Style from 'react-document-style'

const css = 'body { color: red; }'

export default () => (

  

    <div>

      Hi

      <Style css={'div { color: blue; }'}/>

    </div>

  

)

```

- Client  

Would create a style DOM in `head`

```html

body { color: red; }

div { color: blue; }

```

- Server  

Call `rewind` or `peek` to get the css string on server side **after render component**.  

please see the doc about [react-side-effect](https://github.com/gaearon/react-side-effect/) for more information

```js

ReactServerDOM.renderToString()

Style.peek() // div { color: blue; }

Style.rewind() // div { color: blue; }

Style.peek() // undefined

```