Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

react-img-atv

1.0.3 • Public • Published

react-img-atv

Last version Build Status Dependency status Dev Dependencies Status Donate

Apple TV 3D parallax effect as component

Install

npm install --save react-img-atv

Usage

import AtvImg from 'react-img-atv';
 
<AtvImg
  layers={[
    'http://kloc.pm/images/back.png',
    'http://kloc.pm/images/front.png',
  ]}
  staticFallback="http://kloc.pm/images/kloc-icon-flattened.jpg"
  isStatic={false}
  className={'thisIsOptional'}
  style={{ width: 320, height: 190 }}
/>

API

props

static propTypes = {
  layers: PropTypes.arrayOf(PropTypes.string).isRequired,
  isStatic: PropTypes.bool,
  staticFallback: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.object,
};

data

  • layers: Required. An array of image URLs. The images will be stacked on top of each other and the last element will be at the top.
  • 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.

License

react-img-atv © Kiko Beats, Released under the MIT License.
Authored and maintained by Kiko Beats with help from contributors.

kikobeats.com · GitHub Kiko Beats · Twitter @kikobeats

Install

npm i react-img-atv

DownloadsWeekly Downloads

7

Version

1.0.3

License

MIT

Unpacked Size

17.1 kB

Total Files

6

Last publish

Collaborators

  • avatar