andrepolischuk / React Rotation
Licence: mit
React rotation component
Stars: ✭ 102
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Rotation
gesto
You can set up drag, pinch events in any browser.
Stars: ✭ 47 (-53.92%)
Mutual labels: touch, mouse
React Easy Swipe
Easy handler for common swipe operations
Stars: ✭ 85 (-16.67%)
Mutual labels: mouse, touch
React Cursor Position
A React component that decorates its children with mouse and touch coordinates relative to itself.
Stars: ✭ 136 (+33.33%)
Mutual labels: mouse, touch
Pancake
Lightweight, Fast, Easy-to-use HTML5 2D game framework!
Stars: ✭ 79 (-22.55%)
Mutual labels: touch, mouse
React Event Components
🛰 A set of React components designed to handle global events (interval, keyboard, touch, mouse, etc)
Stars: ✭ 271 (+165.69%)
Mutual labels: mouse, touch
Creepyface
A JavaScript library that makes your face follow the pointer. 🤪🖱️👆
Stars: ✭ 412 (+303.92%)
Mutual labels: mouse, touch
Inputsystem
An efficient and versatile input system for Unity.
Stars: ✭ 1,013 (+893.14%)
Mutual labels: mouse, touch
Live Tools
Live-Tools is a library project which aims to convert some Android features to LiveData
Stars: ✭ 75 (-26.47%)
Mutual labels: rotation
Neatinput
A .NET standard project which aims to make keyboard and mouse input monitoring easy on Windows and eventually Linux.
Stars: ✭ 89 (-12.75%)
Mutual labels: mouse
Mouse2joystick custom cemu
An AutoHotkey Script to allow the use of Mouse and Keyboard control in CEMU. This uses vJoy and provides several additional features over regular keyboard control, like: the ability to control the camera with the mouse, toggle walking speed, in BotW use MouseWheel to change weapons, a separate Toggle key for ZL useful for locking onto a target in BotW.
Stars: ✭ 76 (-25.49%)
Mutual labels: mouse
React Hook Mighty Mouse
🐭 React hook that tracks mouse events on selected element - zero dependencies
Stars: ✭ 75 (-26.47%)
Mutual labels: mouse
Wheel Of Lunch
HTML5 randomised spinning wheel to select a place to eat by using a RESTful API to fetch local places.
Stars: ✭ 70 (-31.37%)
Mutual labels: wheel
React Native Sketch View
A React Native component for touch based drawing supporting iOS and Android.
Stars: ✭ 97 (-4.9%)
Mutual labels: touch
Wagon
Creates Wheel based archives to allow portable offline installation of Python packages and their dependencies
Stars: ✭ 86 (-15.69%)
Mutual labels: wheel
Ngx Pinch Zoom
Module provides for image zooming and positioning with use of gestures on a touch screen.
Stars: ✭ 85 (-16.67%)
Mutual labels: touch
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, 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].