Make React components easier and more maintainable by using inline style objects
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
src
.editorconfig
.gitignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

React Free Style

NPM version NPM downloads Build status Test coverage

React Free Style combines Free Style with React.js by managing the style of React components and updating the <style />. This works wonderfully with server-side rendering, where only styles of the currently rendered components will delivered.

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
  • Style debugging in development mode
  • Fast renders with automatic style for rendered React components
  • Supports universal/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 with styled(sheet, options?).

HOC

The styled function accepted an object of styles and maps the styles to CSS class names. It returns a HOC which provides the styles prop to the component (merged with passed 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>
})

Styles can also be functions:

{
  button: (styles, keyframes, hashRules) => ({
    animation: `${keyframes.keyframe} 0.6s linear`,
    animationIterationCount: 'infinite'
  })
}

By default, the styles prop will merge with styles passed into the component from above. To skip this behaviour, use styled().styles instead of props.styles.

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 rendering here.
        </div>
      </body>
    </html>
  )
}

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

// Output CSS only.
const css = styles.toCss()

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 runtime CSS (supports styles, keyframes, rules and CSS objects).

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