🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A cross-platform react rotation component that supports wheel, mouse and touch events.

Animation React

Documentation

react-rotation Build Status

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') )

Related

  • circlr — animation rotation via scroll, mouse and touch events

License

MIT


You May Also Like