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, stringcycle
- cyclic rotation, boolean, defaultfalse
scroll
- rotation by wheel/scroll, boolean, defaulttrue
vertical
- vertical orientation, boolean, defaultfalse
reverse
- reverse rotation, boolean, defaultfalse
tabIndex
- order of focusable element, number|string, default0
autoPlay
- start a frame playback with specified speed, boolean|number, defaultfalse
pauseOnHover
- pause a frame playback on mouse hover, boolean, defaultfalse
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') )
Related
- circlr — animation rotation via scroll, mouse and touch events
License
MIT