Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

React-Prefixr

Deorecated - Use https://github.com/postcss/postcss-js

React-Prefixr, is a utility primarily for managing vendor prefixes for styles in React.

That said, React-Prefixr has no dependencies and can be used in projects where you are not using React. The main difference is that this utility is for adding prefixes for javascript style camelCased styles properties.

Usage

React-Prefixr is used much like ClassList helper from React addons.

var s = require('react-prefixr');

React.createClass({
  render: function(){
    return React.DOM.div({
      style: s({transform: 'translateX(10px)'})
    });
  }
})

Just pass the value to assigned to the style property of a React Element and react-prefixr will convert the object to one with vendor prefixes.

Inner Workings

A list is maintained of properties that may need vendor prefixes. This list will grow over time and contribution are welcome. The correct vendor prefix is determined at run-time in the browser.

As soon, as one of the prefixes is found to apply, the other prefixes are never tested again.

All transforms are also cached.

Finally, properties not found in the list are never even tested and returned as-is. If a property isn't supported at all in a browser it is also returned as-is.

All properties are left untouched when run in Node.

TO-DO

  • Add some code to transform the values of certain properties. e.g. transition: "transform 0.5s ease" Should become `WebkitTransition: "-webkit-transform 0.5s ease".
  • Find missing holes in the list of properties being checked.
  • depend on a third party library to work within node.

About

A simple utility for React.js to help deal with style vendor prefixes. Similar to the class list utility.

Resources

Releases

No releases published

Packages

No packages published