Make React components easier and more maintainable by using inline style objects
TypeScript
Latest commit 4c9a136 Oct 17, 2016 @blakeembrey v4.0.0

README.md

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