node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

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()

Tip! If you're hydrating React on the client-side, feel free to remove the server rendered styles after hydration (e.g. document.head.removeChild(document.getElementById(FreeStyle.STYLE_ID))).

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 (in addition to existing props).

const withStyle = styled({
  button: {
    color: 'red'
  },
  {
    css: {
      '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 into the styled component. If you don't want this feature, use the styles object on withStyles() component instead of props.styles.

Free-Style Methods

The second argument to withStyles and third argument to wrap is withFreeStyle. When true, freeStyle is merged with the component props for inline styles. It supports styles, keyframes, rules and CSS objects during render/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 () {
    const inlineClassName = this.props.freeStyle.registerStyle(props.style)
 
    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, true)

License

MIT license