GitXplorerGitXplorer
n

react-stylePrefixr

public
47 stars
4 forks
1 issues

Commits

List of commits on branch master.
Unverified
44cb265026922661a10a3206fd4a7c7120351385

Deprecate

nnmn committed 8 years ago
Unverified
dc5b80d2860c3bd15faa32ade531009c50870e8c

updated readme

nnmn committed 10 years ago
Unverified
8569350432018c73ec893381547c28672ec1f67a

updated version

nnmn committed 10 years ago
Unverified
87e3f26a5da83460b62b73bf4e35b5484780295b

Merge pull request #1 from radubrehar/master

nnmn committed 10 years ago
Unverified
b1a0f476a9a830b54200afbe094b0c233e0aae7c

add userSelect property to list

rradubrehar committed 10 years ago
Unverified
8d4e33f3c697488693a02769606d7466ca0c1446

Merge branch 'release/v0.0.3'

nnmn committed 10 years ago

README

The README file for this repository.

React-Prefixr

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.