Package Exports

react-parallax-hover
react-parallax-hover/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-parallax-hover) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Parallax Hover

This is a 4kb (gzipped) component inspired by Apple TV's beautiful overlay effects, and the amazingly talented @drewwilson’s atvImg work.

Demo

https://tylerk.github.io/react-parallax-hover/

Install

You will need the following versions listed as a dependency in your project:

react @ 16.8.x
react-dom @ 16.8.x

Install:

$ yarn add react-parallax-hover

- or -

$ npm install react-parallax-hover

Usage

import { ParallaxHover } from 'react-parallax-hover';

<ParallaxHover width={500} height={500}>
    ...
</ParallaxHover>

Options

`children`

Required: true
Type: Any

Component will accept a single child, or a flat array of children.

Note: While this will 'layer' the parallax effect per-child, you will typiclaly see diminishing returns after two or three components.

`width`

Required: true
Type: number
Default: 200

Note: Currently only accepts values to be used as pixels. This component does not accept percentages, em, rem, etc...

`height`

Required: true
Type: number
Default: 200

Note: Currently does not accept a percentage, or relative height

`rotation`

Type: number
Range: 0 - 9
Default: 5

Adjust the exaggeration of the rotation on pointer move.

`shadow`

Type: number
Range: 0 - 9
Default: 5

Adjusts the darkness of the shadow.

`borderRadius`

Type: number in pixels
Default: 0

How To Contribute

Run the following after forking this repo:

$ git clone https://github.com/<your username>/react-parallax-hover/
$ cd react-parallax-hover
$ yarn
$ yarn start

You should see a Storybook instance open up in your default browser.

Happy hacking, and feel free to issue PR's against this repo.