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)

Exports helpers and FreeStyle. Supports options from registerStyleSheet in styled(sheet, options?, hash?, debug?).

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 and freeStyle props to the component.

const withStyle = styled({
  button: {
    color: 'red'
  }
})
 
withStyle.Style.registerCss({
  'html, body': {
    width: '100%',
    height: '100%',
    margin: 0
  }
})
 
export default withStyle(props => {
  return <button className={props.styles.button}>Test</button>
})

P.S. The styles property will merge with any styles passed in the props. If you don't want this feature, use the styles object on withStyles HOC instead of props.

Free-Style Methods

Supports registering styles, keyframes, rules or a CSS object at runtime.

Using wrap(...)

import { wrap, FreeStyle } from 'react-free-style'
 
const Style = FreeStyle.create()
 
const myClassName = Style.registerStyle({
  color: 'red'
})
 
class MyComponent extends React.Component {
 
  render () {
    return React.createElement(
      'button',
      {
        // Class names from `props`, `Style` and runtime context. 
        className: `${this.props.className} ${myClassName} ${this.props.inlineClassName}`
      },
      this.props.children
    )
  }
 
}
 
// Change `props` using the style callback. 
export default wrap(MyComponent, Style, (props, freeStyle) => {
  return Object.assign({}, props, {
    inlineClassName: freeStyle.registerStyle(props.style)
  })
})

License

MIT license