auto-prefixer
Version:
116 lines (103 loc) • 3.31 kB
Markdown
# react inline auto-prefixer
this is a strong utility for adding prefixes for inline styles as used in React.js, that supports most css prefixes, browser or server rendering, and nested style objects.
## Usage:
```javascript
var prefixedStyle = autoprefix(stylesObject);
````
### Example
```javascript
import autoprefix from 'autoprefix';
var Component = React.createClass({
render() {
return (
<div style={autoprefix({flexDirection:'row'})>
auto-prefixes with every render (suitable when state/props changes style)
</div>
<div style={this.styleSheet.style1)>
styleSheet will only be auto-prefixed once on mount - more performant
</div>
<div style={this.styleSheet.style2.nested1)>
works also when nested
</div>
)
}
styleSheet: autoprefix({
style1:{
justifyContent: 'space-between',
overflow: 'auto',
flexShrink: 0
},
style2:{
nested1:{
display: 'flex',
width: 'calc(100% - 10px)'
}
}
})
})
```
### Server rendering
By default, it will add prefixes only for the client's browser. When doing server rendering of a react page, you should add prefixes for every relevant browser. that's really easy -
```javascript
var prefixedStyle = autoprefix(stylesObject, true);
// or - even easier, when requiring autoprefix, do this:
var autoprefix = require('autoprefix')(true);
````
## Supports:
- flex:
- display: flex
- alignContent
- alignItems
- alignSelf
- flex
- flexBasis
- flexDirection
- flexFlow
- flexGrow
- flexShrink
- flexWrap
- justifyContent
- old flex box (new flex properties are transformed automatically)
- animation, and its sub properties::
- Delay
- Direction
- Duration
- FillMode
- IterationCount
- Name
- PlayState
- TimingFunction
- appearance
- backfaceVisibility
- backgroundClip
- borderImage, borderImageSlice
- boxShadow
- boxSizing
- calc
- clipPath
- columns
- cursor
- fontSmoothing
- order
- perspective, perspectiveOrigin
- transform, and its sub properties:
- Origin
- OriginX
- OriginY
- OriginZ
- Style
- transition, and its sub properties:
- Delay
- Duration
- Property
- TimingFunction
- userSelect
### Installation
```sh
$ npm install auto-prefixer --save
```
[](https://travis-ci.org/yonatanmn/react-inline-auto-prefixer)
[](https://codeclimate.com/github/yonatanmn/react-inline-auto-prefixer)
[](https://codeclimate.com/github/yonatanmn/react-inline-auto-prefixer)
[](https://david-dm.org/yonatanmn/react-inline-auto-prefixer)
[](https://david-dm.org/yonatanmn/react-inline-auto-prefixer#info=devDependencies)