# react-atv-img
A port of [@drewwilson](https://github.com/drewwilson)’s amazing [atvImg](https://github.com/drewwilson/atvImg) (Apple TV 3D parallax effect) library in React. It supports both touch and mouse events.

## Install
`npm install --save react-atv-img`

## Demo
[http://keyanzhang.github.io/react-atv-img](http://keyanzhang.github.io/react-atv-img)

![GIF](http://i.imgur.com/XxLKcTW.gif)

Or run it locally:

```
git clone https://github.com/keyanzhang/react-atv-img/
cd react-atv-img
npm install
npm run examplex
```

Then navigate to [http://localhost:3000/](http://localhost:3000/)

## API
### Props

``` javascript
static propTypes = {
  isStatic: PropTypes.bool,
  staticFallback: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.object,
};
```

#### Data
- `isStatic`: Optional. A boolean value. When it evaluates to `true`, it disables the parallax effect, and shows the flattened image (`staticFallback`) instead.
- `staticFallback`: Optional. A flattened image that contains all the layers.

#### Styling: use the following options to set up the width/height of the entire component
- `className`: Optional.
- `style`: Optional.

### Example

``` javascript
import AtvImg from 'react-atv';

<AtvImg
  staticFallback="http://kloc.pm/images/kloc-icon-flattened.jpg"
  isStatic={false}
  className={'thisIsOptional'}
  style={{ width: 320, height: 190 }}
>
  <img style={{ maxWidth: '100%' }} src="http://kloc.pm/images/back.png" />
  <img style={{ maxWidth: '100%' }} src="http://kloc.pm/images/front.png" />
</AtvImg>
```

## License
MIT