React Free Style

NPM version NPM downloads Build status Test coverage

React Free Style is designed to combine the benefits of Free Style with React.js by automatically managing the style state of React components and updating the <style /> component. This works even better with server-side rendering, as only the styles on the current page will be sent to clients.

Why?

Check out why you should be doing CSS in JS. This module exposes the API directly to React.js.

Even more improvements with React Free Style

  • Modular React.js components (automatically namespaced CSS)
  • Fast renders with automatic style mounting (outputs only the styles on the current page)
  • Supports isomorphic applications

Installation

npm install react-free-style --save

Usage

import * as ReactFreeStyle from 'react-free-style'

// Create a style instance for the component.
const Style = ReactFreeStyle.create()

// Register some styles.
var textStyle = Style.registerStyle({
  backgroundColor: 'red'
})

// Create a React component (in the browser, styles are inserted into `<head />`).
var App = React.createClass({

  render: function () {
    return (
      <div className={textStyle}>
        Hello world!
      </div>
    )
  }

})

// Wrap `App` with the styles to render them together.
App = ReactFreeStyle.wrap(App, Style)

// Render the application to the document.
React.render(<App />, document.body)

Server Usage

ReactDOM.renderToString(<Handler />);

const styles = ReactFreeStyle.rewind()

// Use as a React component.
function html () {
  return (
    <html>
      <head>
        {styles.toComponent()}
      </head>
      <body>
        <div id="content">
          // React stuff here.
        </div>
      </body>
    </html>
  )
}

// Use as a string.
const html = `
  <!doctype html>
  <html>
    <head>
      ${styles.toString()}
    </head>
    <body>
      <div id="content">
        // React stuff here.
      </div>
    </body>
  </html>
`

// Use the CSS only.
const css = styles.toCss()

Styles

Register a style.

Style.registerStyle({
  backgroundColor: 'red',
  padding: 10
})

Keyframes

Register keyframes.

Style.registerKeyframes({
  from: {
    color: 'red'
  },
  to: {
    color: 'blue'
  }
})

Rules

Register rule.

Style.registerRule('@media print', {
  body: {
    color: 'red'
  }
})

Dynamical Styles, Keyframes and Rules

class MyComponent extends React.Component {

  static contextTypes = {
    freeStyle: React.PropTypes.object.isRequired
  }

  componentWillMount () {
    // Also has `registerKeyframes` and `registerRule` methods.
    this.inlineClassName = this.context.freeStyle.registerStyle(this.props.style)
  }

  render () {
    return React.createElement(
      'button',
      {
        className: this.inlineClassName
      },
      this.props.children
    )
  }

}

export default wrap(MyComponent)

With Stateless React Components

const MyComponent = (props, context) => {
  inlineStyle = context.freeStyle.registerStyle({ color: 'blue' })

  return <span className={inlineStyle}>hello world</span>
}

MyComponent.contextTypes = {
  freeStyle: React.PropTypes.object.isRequired
}

export default wrap(MyComponent)

License

MIT license



React Free Style

NPM版本 NPM下载 建立状态 测试覆盖率data-canonical-src < / a>

反应自由样式旨在将免费样式的优点与 React.js ,通过自动管理React组件的样式状态并更新&lt; style /&gt; 组件。这样,服务器端渲染效果更好,因为只有当前页面上的样式才会发送给客户端。

为什么?

查看为什么您应该在JS中执行CSS 。该模块将API直接显示给React.js。

使用React Free Style 进一步改进

  • 模块化React.js组件(自动命名空间的CSS)
  • 快速渲染具有自动样式安装(仅输出当前页面上的样式)
  • 支持同构应用程序

安装

npm install react-free-style –save

用法

import * as ReactFreeStyle from 'react-free-style'

// Create a style instance for the component. const Style = ReactFreeStyle.create()

// Register some styles. var textStyle = Style.registerStyle({ backgroundColor: 'red' })

// Create a React component (in the browser, styles are inserted into &lt;head /&gt;). var App = React.createClass({

render: function () { return ( <div className={textStyle}> Hello world! </div> ) }

})

// Wrap App with the styles to render them together. App = ReactFreeStyle.wrap(App, Style)

// Render the application to the document. React.render(<App />, document.body)

服务器使用情况

ReactDOM.renderToString(<Handler />);

const styles = ReactFreeStyle.rewind()

// Use as a React component. function html () { return ( <html> <head> {styles.toComponent()} </head> <body> <div id="content"> // React stuff here. </div> </body> </html> ) }

// Use as a string. const html = </span></span> <span class="pl-s"> &lt;!doctype html&gt;</span> <span class="pl-s"> &lt;html&gt;</span> <span class="pl-s"> &lt;head&gt;</span> <span class="pl-s"> <span class="pl-s1"><span class="pl-pse">${</span><span class="pl-smi">styles</span>.<span class="pl-c1">toString</span>()<span class="pl-pse">}</span></span></span> <span class="pl-s"> &lt;/head&gt;</span> <span class="pl-s"> &lt;body&gt;</span> <span class="pl-s"> &lt;div id=&#34;content&#34;&gt;</span> <span class="pl-s"> // React stuff here.</span> <span class="pl-s"> &lt;/div&gt;</span> <span class="pl-s"> &lt;/body&gt;</span> <span class="pl-s"> &lt;/html&gt;</span> <span class="pl-s"><span class="pl-pds">

// Use the CSS only. const css = styles.toCss()

样式

注册样式

Style.registerStyle({
  backgroundColor: 'red',
  padding: 10
})

关键帧

注册关键帧

Style.registerKeyframes({
  from: {
    color: 'red'
  },
  to: {
    color: 'blue'
  }
})

规则

注册规则

Style.registerRule('@media print', {
  body: {
    color: 'red'
  }
})

动态样式,关键帧和规则

class MyComponent extends React.Component {

static contextTypes = { freeStyle: React.PropTypes.object.isRequired }

componentWillMount () { // Also has registerKeyframes and registerRule methods. this.inlineClassName = this.context.freeStyle.registerStyle(this.props.style) }

render () { return React.createElement( 'button', { className: this.inlineClassName }, this.props.children ) }

}

export default wrap(MyComponent)

With Stateless React Components

const MyComponent = (props, context) => {
  inlineStyle = context.freeStyle.registerStyle({ color: 'blue' })

return <span className={inlineStyle}>hello world</span> }

MyComponent.contextTypes = { freeStyle: React.PropTypes.object.isRequired }

export default wrap(MyComponent)

许可证

MIT许可证




相关问题推荐