Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-free-stylepublic

    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

    install

    npm i react-free-style

    Downloadsweekly downloads

    57

    version

    7.0.2

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar