react-prefixer-provider

Provide a vendor prefixer via context so you don't need to hard code or pass it through the whole component tree. Includes a HOC to inject the prefixer from context, so you don't need to deal with the context at all.

Installation

npm install react-prefixer-provider --save

Usage

import { PrefixerProvider, withPrefixer } from "react-prefixer-provider"

const RawButton = (props) => (
  <button {...props} style={props.prefixer(props.style)} />
)

const Button = withPrefixer(RawButton)

const App = () => (
  <PrefixerProvider prefixer={prefixer}>
    <Button style={appearance: "normal"}>Hello</Button>
  </PrefixerProvider>
)

ReactDOM.render(<App />, mountNode)

With decorator syntax

You can use ES7 with decorators (using babel-plugin-transform-decorators-legacy).

@withPrefixer
const Button = (props) => (
  <button {...props} style={props.prefixer(props.style)} />
)

Example implementation of prefixer

// This prefixes everything with the webkit prefix.
const prefixer = (styles) => {
  const prefixed = {}
  for (let key in styles) {
    prefixed["Webkit" + key[0].toUpperCase() + key.substr(1)] = styles[key]
  }
  return prefixed
}