https://github.com/andrepolischuk/react-rotation

React rotation component
https://github.com/andrepolischuk/react-rotation

mouse react rotation touch wheel

Last synced: 1 day ago
JSON representation

React rotation component

• Host: GitHub
• URL: https://github.com/andrepolischuk/react-rotation
• Owner: andrepolischuk
• License: mit
• Created: 2015-07-03T11:18:34.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-06-23T13:22:52.000Z (over 4 years ago)
• Last Synced: 2024-04-27T05:23:02.820Z (8 months ago)
• Topics: mouse, react, rotation, touch, wheel
• Language: JavaScript
• Homepage: http://andrepolischuk.github.io/react-rotation
• Size: 1.01 MB
• Stars: 112
• Watchers: 5
• Forks: 28
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-rotation [![Build Status][travis-image]][travis-url]

> [React][react] rotation component

Supports wheel, keyboard, mouse and touch events

## Install

```sh

npm install --save react-rotation

```

## Usage

```js

import React from 'react'

import {render} from 'react-dom'

import Rotation from 'react-rotation'

render(

  

    

    

    

    

  ,

  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:

```js

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}) => (

  }>

    

  

)

render(

  

    

    

    

    

  ,

  document.querySelector('.container')

)

```

## Related

* [circlr][circlr] — animation rotation via scroll, mouse and touch events

## License

MIT

[travis-url]: https://travis-ci.org/andrepolischuk/react-rotation

[travis-image]: https://travis-ci.org/andrepolischuk/react-rotation.svg?branch=master

[react]: https://github.com/facebook/react

[circlr]: https://github.com/andrepolischuk/circlr