leandrowd / React Easy Swipe
Easy handler for common swipe operations
Stars: ✭ 85
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Easy Swipe
Cupertino Pane
🎉📱Multi-functional panes and boards for next generation progressive applications
Stars: ✭ 267 (+214.12%)
Mutual labels: mobile, swipe, touch
React Responsive Carousel
React.js Responsive Carousel (with Swipe)
Stars: ✭ 1,962 (+2208.24%)
Mutual labels: mobile, swipe, react-component
React Swipeable
React swipe event handler hook
Stars: ✭ 1,348 (+1485.88%)
Mutual labels: mobile, swipe, touch
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+34628.24%)
Mutual labels: mobile, swipe, touch
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (+37.65%)
Mutual labels: mobile, swipe, touch
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+2307.06%)
Mutual labels: mobile, swipe, touch
React Event Components
🛰 A set of React components designed to handle global events (interval, keyboard, touch, mouse, etc)
Stars: ✭ 271 (+218.82%)
Mutual labels: mouse, touch
Framework7
Full featured HTML framework for building iOS & Android apps
Stars: ✭ 16,560 (+19382.35%)
Mutual labels: mobile, touch
Recipes App React Native
Recipes App in React Native
Stars: ✭ 386 (+354.12%)
Mutual labels: mobile, react-component
Better Gesture
A gesture library use for pc, mobile, vue, and mini programs
Stars: ✭ 419 (+392.94%)
Mutual labels: mobile, touch
Hover On Touch
A pure Javascript Plugin for an alternative hover function that works on mobile and desktop devices. It triggers a hover css class on »Taphold« and goes to a possible link on »Tap«. It works with all html elements.
Stars: ✭ 256 (+201.18%)
Mutual labels: mobile, touch
react-gallery-carousel
Mobile-friendly gallery carousel 🎠 with server side rendering, lazy loading, fullscreen, thumbnails, touch, mouse emulation, RTL, keyboard navigation and customisations.
Stars: ✭ 178 (+109.41%)
Mutual labels: touch, swipe
Vue Gallery
📷 Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Stars: ✭ 405 (+376.47%)
Mutual labels: mobile, touch
React Native Swipe Gestures
4-directional swipe gestures for react-native
Stars: ✭ 471 (+454.12%)
Mutual labels: swipe, touch
React Native Card Stack Swiper
Tinder like react-native card stack swiper
Stars: ✭ 315 (+270.59%)
Mutual labels: swipe, react-component
Pancake
Lightweight, Fast, Easy-to-use HTML5 2D game framework!
Stars: ✭ 79 (-7.06%)
Mutual labels: touch, mouse
Creepyface
A JavaScript library that makes your face follow the pointer. 🤪🖱️👆
Stars: ✭ 412 (+384.71%)
Mutual labels: mouse, touch
Inputsystem
An efficient and versatile input system for Unity.
Stars: ✭ 1,013 (+1091.76%)
Mutual labels: mouse, touch
REACT EASY SWIPE
Add swipe interactions to your react component.
- Generated using react-init
Demo
http://leandrowd.github.io/react-easy-swipe/
- Open your console;
- Swipe over the content and check your console;
- This is a touch component so make sure your browser is emulating touch.
Tips:
-
To prevent scroll during swipe, return true from the handler passed to onSwipeMove
-
To allow mouse events to behave like touch, pass a prop allowMouseEvents
-
To prevent accidental swipes on scroll, pass a prop tolerance with the tolerance pixel as number.
Instalation
npm install react-easy-swipe --save
Usage
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Swipe from 'react-easy-swipe';
class MyComponent extends Component {
onSwipeStart(event) {
console.log('Start swiping...', event);
}
onSwipeMove(position, event) {
console.log(`Moved ${position.x} pixels horizontally`, event);
console.log(`Moved ${position.y} pixels vertically`, event);
}
onSwipeEnd(event) {
console.log('End swiping...', event);
}
render() {
const boxStyle = {
width: '100%',
height: '300px',
border: '1px solid black',
background: '#ccc',
padding: '20px',
fontSize: '3em'
};
return (
<Swipe
onSwipeStart={this.onSwipeStart}
onSwipeMove={this.onSwipeMove}
onSwipeEnd={this.onSwipeEnd}>
<div style={boxStyle}>Open the console and swipe me</div>
</Swipe>
);
}
}
ReactDOM.render(<MyComponent/>, document.getElementById('root'));
Properties
{
tagName: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
children: PropTypes.node,
allowMouseEvents: PropTypes.bool,
onSwipeUp: PropTypes.func,
onSwipeDown: PropTypes.func,
onSwipeLeft: PropTypes.func,
onSwipeRight: PropTypes.func,
onSwipeStart: PropTypes.func,
onSwipeMove: PropTypes.func,
onSwipeEnd: PropTypes.func,
tolerance: PropTypes.number.isRequired
}
Contributing
Please, feel free to contribute. You may open a bug, request a feature, submit a pull request or whatever you want!
License
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].