Package Exports

fe-react-rotation

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 (fe-react-rotation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-rotation

React rotation component

Supports wheel, keyboard, mouse and touch events

Install

npm install --save react-rotation

Usage

import React from 'react'
import {render} from 'react-dom'
import Rotation from 'react-rotation'

render(
  <Rotation>
    <img src='images/00.jpg' />
    <img src='images/01.jpg' />
    <img src='images/02.jpg' />
    <img src='images/03.jpg' />
  </Rotation>,
  document.querySelector('.container')
)

Props

className - class name of container, string
cycle - cyclic rotation, boolean, default false
scroll - rotation by wheel/scroll, boolean, default true
vertical - vertical orientation, boolean, default false
reverse - reverse rotation, boolean, default false
tabIndex - order of focusable element, number|string, default 0
autoPlay - start a frame playback with specified speed, boolean|number, default false
pauseOnHover - pause a frame playback on mouse hover, boolean, default false
onChange - frame change event handler, function

Tips

You can use any third-party wrapper for lazy loading the images with placeholder:

import React from 'react'
import {render} from 'react-dom'
import Lazy from 'react-lazyload'
import Rotation from 'react-rotation'
import Spinner from './components/Spinner'

const Image = ({height, src}) => (
  <Lazy height={height} placeholder={<Spinner />}>
    <img src={src} />
  </Lazy>
)

render(
  <Rotation>
    <Image height={200} src='images/00.jpg' />
    <Image height={200} src='images/01.jpg' />
    <Image height={200} src='images/02.jpg' />
    <Image height={200} src='images/03.jpg' />
  </Rotation>,
  document.querySelector('.container')
)

circlr — animation rotation via scroll, mouse and touch events

License

MIT

fe-react-rotation