node package manager

react-free-style

React Free Style

NPM version NPM downloads Build status Test coverage Greenkeeper badge

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 { styled } from 'react-free-style'
 
const App = styled({
  text: {
    backgroundColor: 'red'
  }
})((props) => {
  return <div className={props.styles.text}>Hello world!</div>
})
 
// 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()

HOC

The styled function accepted a keyed map of styles and maps the styles to class names. It returns a HOC which provides the styles prop to the component.

const withStyle = styled({
  button: {
    color: 'red'
  }
})
 
withStyle.Style.registerCss({
  html: {
    color: '#111'
  }
})
 
export default withStyle(props => {
  return <button className={props.styles.button}>Test</button>
})

Tip: Style and styles are properties of the HOC function so you can alter the styles (e.g. registerKeyframes, registerCss) before rendering.

registerStyleSheet

Exports a small helper function for registering a map of styles (e.g. styled).

import { create, registerStyleSheet } from 'react-free-style'
 
const Style = FreeStyle.create()
 
export const styles = registerStyleSheet(Style, {
  button: {
    color: 'red'
  },
  text: {
    color: 'blue'
  }
})

Free-Style Methods

Supports registering a style, keyframes, rule or CSS object on context.freeStyle, styled().Style or create().

Dynamical Styles Using Context

import { wrap, ReactFreeStyleContext } from 'react-free-style'
 
class MyComponent extends React.Component {
 
  static contextTypes = ReactFreeStyleContext
 
  componentWillMount () {
    // Or: `registerKeyframes`, `registerRule`, `registerCss`. 
    this.inlineClassName = this.context.freeStyle.registerStyle(this.props.style)
  }
 
  render () {
    return React.createElement(
      'button',
      {
        className: this.inlineClassName
      },
      this.props.children
    )
  }
 
}
 
export default wrap(MyComponent)

And With Stateless React Components

import { wrap, ReactFreeStyleContext } from 'react-free-style'
 
const MyComponent = (props, context) => {
  const className = context.freeStyle.registerStyle({ color: 'blue' })
 
  return <span className={className}>hello world</span>
}
 
MyComponent.contextTypes = ReactFreeStyleContext
 
export default wrap(MyComponent)

License

MIT license