Favivon - Correção

This commit is contained in:
2026-05-30 19:59:39 -03:00
parent 76ddaa815d
commit d7dfd221f0
32859 changed files with 5459654 additions and 404 deletions
+358
View File
@@ -0,0 +1,358 @@
# @use-gesture/core
## 10.3.1
### Patch Changes
- Updated dependencies [6f6f4a5b4]
- @use-gesture/core@10.3.1
## 10.3.0
### Patch Changes
- Updated dependencies [c19ff0b24]
- Updated dependencies [1ee9f42e3]
- @use-gesture/core@10.3.0
## 10.2.27
### Patch Changes
- Updated dependencies [0dce2216c]
- Updated dependencies [957aee8b5]
- Updated dependencies [51c6cfcf4]
- @use-gesture/core@10.2.27
## 10.2.26
### Patch Changes
- Updated dependencies [db0d934eb]
- Updated dependencies [43e751a51]
- @use-gesture/core@10.2.26
## 10.2.25
### Patch Changes
- Updated dependencies [3701753ea]
- @use-gesture/core@10.2.25
## 10.2.24
### Patch Changes
- Updated dependencies [60aae2149]
- @use-gesture/core@10.2.24
## 10.2.23
### Patch Changes
- Updated dependencies [79684a05f]
- @use-gesture/core@10.2.23
## 10.2.22
### Patch Changes
- Updated dependencies [c6215e8ad]
- @use-gesture/core@10.2.22
## 10.2.21
### Patch Changes
- Updated dependencies [6f4c09b55]
- Updated dependencies [854f4dfc1]
- @use-gesture/core@10.2.21
## 10.2.20
### Patch Changes
- Updated dependencies [de807fddc]
- @use-gesture/core@10.2.20
## 10.2.19
### Patch Changes
- Updated dependencies [c7cb407bd]
- @use-gesture/core@10.2.19
## 10.2.18
### Patch Changes
- Updated dependencies [115ee1f59]
- @use-gesture/core@10.2.18
## 10.2.17
### Patch Changes
- Updated dependencies [48dc6a102]
- Updated dependencies [d73ee4e34]
- @use-gesture/core@10.2.17
## 10.2.16
### Patch Changes
- a521a171f: types: remove React types dependency on core package
- Updated dependencies [a521a171f]
- @use-gesture/core@10.2.16
## 10.2.15
### Patch Changes
- Updated dependencies [be1703a6d]
- @use-gesture/core@10.2.15
## 10.2.14
### Patch Changes
- Updated dependencies [e82f1c220]
- @use-gesture/core@10.2.14
## 10.2.13
### Patch Changes
- Updated dependencies [6896094b3]
- Updated dependencies [15724eb5c]
- @use-gesture/core@10.2.13
## 10.2.12
### Patch Changes
- 91651b202: Fix config types
- Updated dependencies [91651b202]
- @use-gesture/core@10.2.12
## 10.2.11
### Patch Changes
- Updated dependencies [670e6e2db]
- Updated dependencies [5979b1add]
- @use-gesture/core@10.2.11
## 10.2.10
### Patch Changes
- Updated dependencies [f593dbe09]
- @use-gesture/core@10.2.10
## 10.2.9
### Patch Changes
- Updated dependencies [d86df73b9]
- @use-gesture/core@10.2.9
## 10.2.8
### Patch Changes
- Updated dependencies [2c0fde118]
- @use-gesture/core@10.2.8
## 10.2.7
### Patch Changes
- Updated dependencies [2d943428c]
- @use-gesture/core@10.2.7
## 10.2.6
### Patch Changes
- Updated dependencies [916d178c6]
- @use-gesture/core@10.2.6
## 10.2.5
### Patch Changes
- Updated dependencies [cd5533a4c]
- Updated dependencies [548a90985]
- Updated dependencies [c5067dce0]
- Updated dependencies [4eaabaf1a]
- @use-gesture/core@10.2.5
## 10.2.4
### Patch Changes
- Updated dependencies [ae631004a]
- @use-gesture/core@10.2.4
## 10.2.3
### Patch Changes
- Updated dependencies [8302c5bfd]
- @use-gesture/core@10.2.3
## 10.2.2
### Patch Changes
- Updated dependencies [cffaba5ae]
- @use-gesture/core@10.2.2
## 10.2.1
### Patch Changes
- Updated dependencies [2f0cd466b]
- @use-gesture/core@10.2.1
## 10.2.0
### Patch Changes
- Updated dependencies [b4e6181e7]
- @use-gesture/core@10.2.0
## 10.1.6
### Patch Changes
- Updated dependencies [9883b1c78]
- @use-gesture/core@10.1.6
## 10.1.5
### Patch Changes
- Updated dependencies [55505c071]
- @use-gesture/core@10.1.5
## 10.1.4
### Patch Changes
- Updated dependencies [090ba6b62]
- @use-gesture/core@10.1.4
## 10.1.3
### Patch Changes
- Updated dependencies [a9f99ce3c]
- @use-gesture/core@10.1.3
## 10.1.2
### Patch Changes
- Updated dependencies [ed0073543]
- @use-gesture/core@10.1.2
## 10.1.1
### Patch Changes
- Updated dependencies [8a0bfacb0]
- Updated dependencies [8a0bfacb0]
- @use-gesture/core@10.1.1
## 10.1.0
### Patch Changes
- Updated dependencies [b67543ff7]
- @use-gesture/core@10.1.0
## 10.0.3
### Patch Changes
- Updated dependencies [de01d7dbb]
- @use-gesture/core@10.0.3
## 10.0.2
### Patch Changes
- Updated dependencies [a219d3f69]
- @use-gesture/core@10.0.2
## 10.0.1
### Patch Changes
- Updated dependencies [c00c7b1]
- @use-gesture/core@10.0.1
## 10.0.0
- e5d1cac: ## General breaking changes
- `config.domTarget` is renamed `config.target`
- `config.initial` is renamed `config.from`
- `config.from` accounts for `offset` and not for `movement` as it was the case for `config.initial`
- `config.bounds` accounts for `offset`
- `velocity` is now a Vector with absolute (use `direction` if you need relative velocity)
- `vxvy`, `previous`, `vdva` are gone
- `distance` is now a Vector with cumulative deltas
- `state.pressed` is an alias to `state.down`
- `config.transform` only transforms `movement` and `offset`. Raw values are no longer transformed.
## Features
### General
- Types: Handlers have a better type inference
- Adds `preventDefault` option so that all events are prevented when `true`
### Drag
- keyboard support when target has focus!
- shows warning when `touch-action` is not properly set in development mode
- `bounds` accepts an `HTMLElement` or a React Ref
- `config.experimental_preventWindowScrollY` is now `config.preventScroll`
- supports non capturing (uses mouse listeners instead)
```js
useDrag(handler, {
pointer: {
touch: true, // uses touch on mobile
capture: false, // don't use setPointerCapture (uses window)
lock: true // will perform a pointer lock when drag starts, and exit pointer lock when drag ends,
},
axis: undefined | 'x' | 'y' | 'lock',
swipe: {
distance: 50,
velocity: 0.5,
duration: 250
}
})
```
### Pinch
- `distanceBounds` is now `scaleBounds`
- `state.movement` and `state.offset` now reflect scale and not distance
- Use pointer events where it can
- Add `useTouch` option to use touch events if needed
- `config.axis` can be set to `'lock'`, which will either scale or rotate.
```js
usePinch(({ offset: [scale, angle] }) => {
api.start({ rotate: angle, scale })
})
```
### Mouse and Hover
- Add option `mouseOnly` that you can set to `false` to trigger events on non-mouse events.
+19
View File
@@ -0,0 +1,19 @@
Copyright (c) 2018-present Paul Henschel <drcmda@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+122
View File
@@ -0,0 +1,122 @@
# @use-gesture
[![npm (tag)](https://img.shields.io/npm/v/@use-gesture/react?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@use-gesture/react) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@use-gesture/react?style=flat&colorA=000000&colorB=000000) ![NPM](https://img.shields.io/npm/l/@use-gesture/react?style=flat&colorA=000000&colorB=000000) [![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/poimandres)
@use-gesture is a library that lets you bind richer mouse and touch events to any component or view. With the data you receive, it becomes trivial to set up gestures, and often takes no more than a few lines of code.
You can use it stand-alone, but to make the most of it you should combine it with an animation library like [react-spring](https://github.com/pmndrs/react-spring), though you can most certainly use any other.
<p align="middle">
<a href="https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/draggable-list"><img src="https://i.imgur.com/qLKJod3.gif" width="400"/></a>
<a href="https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/cards-stack"><img src="https://i.imgur.com/H6nXQEq.gif" width="400"/></a>
<a href="https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/action-sheet"><img src="https://i.imgur.com/THKPrmR.gif" width="400"/></a>
<a href="https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/infinite-slideshow"><img src="https://i.imgur.com/cuOfqST.gif" width="400"/></a>
<a href="https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/viewpager"><img src="https://i.imgur.com/iwZOfT9.gif" width="400"/></a>
<a href="https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/card-zoom"><img src="https://i.imgur.com/Walt1Ip.gif" width="400"/></a>
</p>
<p align="middle"><i>The demos are real click them!</i></p>
## Installation
### React
```bash
#Yarn
yarn add @use-gesture/react
#NPM
npm install @use-gesture/react
```
### Vanilla javascript
```bash
#Yarn
yarn add @use-gesture/vanilla
#NPM
npm install @use-gesture/vanilla
```
### [Full documentation website](https://use-gesture.netlify.com)
- [Available Gestures](https://use-gesture.netlify.com/docs/gestures)
- [Gesture State](https://use-gesture.netlify.com/docs/state)
- [Gesture Options](https://use-gesture.netlify.com/docs/options)
- [FAQ](https://use-gesture.netlify.com/docs/faq)
### Simple example
<p align="middle">
<a href="https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/gesture-simplest"><img src="https://i.imgur.com/AMzsEi3.gif" width="400"/></a>
</p>
<details>
<summary>React</summary>
```jsx
import { useSpring, animated } from '@react-spring/web'
import { useDrag } from '@use-gesture/react'
function Example() {
const [{ x, y }, api] = useSpring(() => ({ x: 0, y: 0 }))
// Set the drag hook and define component movement based on gesture data.
const bind = useDrag(({ down, movement: [mx, my] }) => {
api.start({ x: down ? mx : 0, y: down ? my : 0 })
})
// Bind it to a component.
return <animated.div {...bind()} style={{ x, y, touchAction: 'none' }} />
}
```
</details>
<details>
<summary>Vanilla javascript</summary>
```html
<!-- index.html -->
<div id="drag" />
```
```js
// script.js
const el = document.getElementById('drag')
const gesture = new DragGesture(el, ({ active, movement: [mx, my] }) => {
setActive(active)
anime({
targets: el,
translateX: active ? mx : 0,
translateY: active ? my : 0,
duration: active ? 0 : 1000
})
})
// when you want to remove the listener
gesture.destroy()
```
</details>
The example above makes a `div` draggable so that it follows your mouse on drag, and returns to its initial position on release.
**Make sure you always set [`touchAction`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) on a draggable element to prevent glitches with the browser native scrolling on touch devices**.
### Available hooks
@use-gesture/react exports several hooks that can handle different gestures:
| Hook | Description |
| ------------ | ------------------------------------------ |
| `useDrag` | Handles the drag gesture |
| `useMove` | Handles mouse move events |
| `useHover` | Handles mouse enter and mouse leave events |
| `useScroll` | Handles scroll events |
| `useWheel` | Handles wheel events |
| `usePinch` | Handles the pinch gesture |
| `useGesture` | Handles multiple gestures in one hook |
#### [More on the full documentation website...](https://use-gesture.netlify.app/)
@@ -0,0 +1,2 @@
import { Action, GestureHandlers, UserGestureConfig } from '@use-gesture/core/types';
export declare function createUseGesture(actions: Action[]): <Config extends UserGestureConfig = UserGestureConfig>(_handlers: GestureHandlers, _config?: Config | undefined) => Config["target"] extends object ? void : (...args: any[]) => import("./types.js").ReactDOMAttributes;
+11
View File
@@ -0,0 +1,11 @@
export { useDrag } from "./useDrag.js";
export { usePinch } from "./usePinch.js";
export { useWheel } from "./useWheel.js";
export { useScroll } from "./useScroll.js";
export { useMove } from "./useMove.js";
export { useHover } from "./useHover.js";
export { useGesture } from "./useGesture.js";
export { createUseGesture } from "./createUseGesture.js";
export * from '@use-gesture/core/utils';
export * from '@use-gesture/core/actions';
export * from '@use-gesture/core/types';
+5
View File
@@ -0,0 +1,5 @@
/// <reference types="react" />
import { DOMHandlers } from '@use-gesture/core/types';
export type ReactDOMAttributes = {
[Key in keyof DOMHandlers]: React.DOMAttributes<EventTarget>[Key];
};
+8
View File
@@ -0,0 +1,8 @@
import { EventTypes, Handler, UserDragConfig } from '@use-gesture/core/types';
/**
* Drag hook.
*
* @param {Handler<'drag'>} handler - the function fired every time the drag gesture updates
* @param {UserDragConfig} config - the config object including generic options and drag options
*/
export declare function useDrag<EventType = EventTypes['drag'], Config extends UserDragConfig = UserDragConfig>(handler: Handler<'drag', EventType>, config?: Config): Config["target"] extends object ? void : (...args: any[]) => import("./types.js").ReactDOMAttributes;
+10
View File
@@ -0,0 +1,10 @@
import { GestureHandlers, UserGestureConfig, EventTypes, AnyHandlerEventTypes } from '@use-gesture/core/types';
/**
* @public
*
* The most complete gesture hook, allowing support for multiple gestures.
*
* @param {GestureHandlers} handlers - an object with on[Gesture] keys containg gesture handlers
* @param {UserGestureConfig} config - the full config object
*/
export declare function useGesture<HandlerTypes extends AnyHandlerEventTypes = EventTypes, Config extends UserGestureConfig = UserGestureConfig>(handlers: GestureHandlers<HandlerTypes>, config?: Config): Config["target"] extends object ? void : (...args: any[]) => import("./types.js").ReactDOMAttributes;
+8
View File
@@ -0,0 +1,8 @@
import { EventTypes, UserHoverConfig, Handler } from '@use-gesture/core/types';
/**
* Hover hook.
*
* @param {Handler<'hover'>} handler - the function fired every time the hover gesture updates
* @param {UserHoverConfig} config - the config object including generic options and hover options
*/
export declare function useHover<EventType = EventTypes['hover'], Config extends UserHoverConfig = UserHoverConfig>(handler: Handler<'hover', EventType>, config?: Config): Config["target"] extends object ? void : (...args: any[]) => import("./types.js").ReactDOMAttributes;
+8
View File
@@ -0,0 +1,8 @@
import { UserMoveConfig, Handler, EventTypes } from '@use-gesture/core/types';
/**
* Move hook.
*
* @param {Handler<'move'>} handler - the function fired every time the move gesture updates
* @param {UserMoveConfig} config - the config object including generic options and move options
*/
export declare function useMove<EventType = EventTypes['move'], Config extends UserMoveConfig = UserMoveConfig>(handler: Handler<'move', EventType>, config?: Config): Config["target"] extends object ? void : (...args: any[]) => import("./types.js").ReactDOMAttributes;
+8
View File
@@ -0,0 +1,8 @@
import { UserPinchConfig, Handler, EventTypes } from '@use-gesture/core/types';
/**
* Pinch hook.
*
* @param {Handler<'pinch'>} handler - the function fired every time the pinch gesture updates
* @param {UserPinchConfig} config - the config object including generic options and pinch options
*/
export declare function usePinch<EventType = EventTypes['pinch'], Config extends UserPinchConfig = UserPinchConfig>(handler: Handler<'pinch', EventType>, config?: Config): Config["target"] extends object ? void : (...args: any[]) => import("./types.js").ReactDOMAttributes;
+8
View File
@@ -0,0 +1,8 @@
import { UserScrollConfig, Handler, EventTypes } from '@use-gesture/core/types';
/**
* Scroll hook.
*
* @param {Handler<'scroll'>} handler - the function fired every time the scroll gesture updates
* @param {UserScrollConfig} config - the config object including generic options and scroll options
*/
export declare function useScroll<EventType = EventTypes['scroll'], Config extends UserScrollConfig = UserScrollConfig>(handler: Handler<'scroll', EventType>, config?: Config): Config["target"] extends object ? void : (...args: any[]) => import("./types.js").ReactDOMAttributes;
+8
View File
@@ -0,0 +1,8 @@
import { UserWheelConfig, Handler, EventTypes } from '@use-gesture/core/types';
/**
* Wheel hook.
*
* @param {Handler<'wheel'>} handler - the function fired every time the wheel gesture updates
* @param {UserWheelConfig} config - the config object including generic options and wheel options
*/
export declare function useWheel<EventType = EventTypes['wheel'], Config extends UserWheelConfig = UserWheelConfig>(handler: Handler<'wheel', EventType>, config?: Config): Config["target"] extends object ? void : (...args: any[]) => import("./types.js").ReactDOMAttributes;
+2
View File
@@ -0,0 +1,2 @@
export * from "./declarations/src/index";
//# sourceMappingURL=use-gesture-react.cjs.d.ts.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"use-gesture-react.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
+113
View File
@@ -0,0 +1,113 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var actions = require('@use-gesture/core/actions');
var React = require('react');
var core = require('@use-gesture/core');
var utils = require('@use-gesture/core/utils');
var types = require('@use-gesture/core/types');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
function useRecognizers(handlers, config = {}, gestureKey, nativeHandlers) {
const ctrl = React__default["default"].useMemo(() => new core.Controller(handlers), []);
ctrl.applyHandlers(handlers, nativeHandlers);
ctrl.applyConfig(config, gestureKey);
React__default["default"].useEffect(ctrl.effect.bind(ctrl));
React__default["default"].useEffect(() => {
return ctrl.clean.bind(ctrl);
}, []);
if (config.target === undefined) {
return ctrl.bind.bind(ctrl);
}
return undefined;
}
function useDrag(handler, config) {
actions.registerAction(actions.dragAction);
return useRecognizers({
drag: handler
}, config || {}, 'drag');
}
function usePinch(handler, config) {
actions.registerAction(actions.pinchAction);
return useRecognizers({
pinch: handler
}, config || {}, 'pinch');
}
function useWheel(handler, config) {
actions.registerAction(actions.wheelAction);
return useRecognizers({
wheel: handler
}, config || {}, 'wheel');
}
function useScroll(handler, config) {
actions.registerAction(actions.scrollAction);
return useRecognizers({
scroll: handler
}, config || {}, 'scroll');
}
function useMove(handler, config) {
actions.registerAction(actions.moveAction);
return useRecognizers({
move: handler
}, config || {}, 'move');
}
function useHover(handler, config) {
actions.registerAction(actions.hoverAction);
return useRecognizers({
hover: handler
}, config || {}, 'hover');
}
function createUseGesture(actions$1) {
actions$1.forEach(actions.registerAction);
return function useGesture(_handlers, _config) {
const {
handlers,
nativeHandlers,
config
} = core.parseMergedHandlers(_handlers, _config || {});
return useRecognizers(handlers, config, undefined, nativeHandlers);
};
}
function useGesture(handlers, config) {
const hook = createUseGesture([actions.dragAction, actions.pinchAction, actions.scrollAction, actions.wheelAction, actions.moveAction, actions.hoverAction]);
return hook(handlers, config || {});
}
exports.createUseGesture = createUseGesture;
exports.useDrag = useDrag;
exports.useGesture = useGesture;
exports.useHover = useHover;
exports.useMove = useMove;
exports.usePinch = usePinch;
exports.useScroll = useScroll;
exports.useWheel = useWheel;
Object.keys(actions).forEach(function (k) {
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
enumerable: true,
get: function () { return actions[k]; }
});
});
Object.keys(utils).forEach(function (k) {
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
enumerable: true,
get: function () { return utils[k]; }
});
});
Object.keys(types).forEach(function (k) {
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
enumerable: true,
get: function () { return types[k]; }
});
});
+7
View File
@@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === "production") {
module.exports = require("./use-gesture-react.cjs.prod.js");
} else {
module.exports = require("./use-gesture-react.cjs.dev.js");
}
+113
View File
@@ -0,0 +1,113 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var actions = require('@use-gesture/core/actions');
var React = require('react');
var core = require('@use-gesture/core');
var utils = require('@use-gesture/core/utils');
var types = require('@use-gesture/core/types');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
function useRecognizers(handlers, config = {}, gestureKey, nativeHandlers) {
const ctrl = React__default["default"].useMemo(() => new core.Controller(handlers), []);
ctrl.applyHandlers(handlers, nativeHandlers);
ctrl.applyConfig(config, gestureKey);
React__default["default"].useEffect(ctrl.effect.bind(ctrl));
React__default["default"].useEffect(() => {
return ctrl.clean.bind(ctrl);
}, []);
if (config.target === undefined) {
return ctrl.bind.bind(ctrl);
}
return undefined;
}
function useDrag(handler, config) {
actions.registerAction(actions.dragAction);
return useRecognizers({
drag: handler
}, config || {}, 'drag');
}
function usePinch(handler, config) {
actions.registerAction(actions.pinchAction);
return useRecognizers({
pinch: handler
}, config || {}, 'pinch');
}
function useWheel(handler, config) {
actions.registerAction(actions.wheelAction);
return useRecognizers({
wheel: handler
}, config || {}, 'wheel');
}
function useScroll(handler, config) {
actions.registerAction(actions.scrollAction);
return useRecognizers({
scroll: handler
}, config || {}, 'scroll');
}
function useMove(handler, config) {
actions.registerAction(actions.moveAction);
return useRecognizers({
move: handler
}, config || {}, 'move');
}
function useHover(handler, config) {
actions.registerAction(actions.hoverAction);
return useRecognizers({
hover: handler
}, config || {}, 'hover');
}
function createUseGesture(actions$1) {
actions$1.forEach(actions.registerAction);
return function useGesture(_handlers, _config) {
const {
handlers,
nativeHandlers,
config
} = core.parseMergedHandlers(_handlers, _config || {});
return useRecognizers(handlers, config, undefined, nativeHandlers);
};
}
function useGesture(handlers, config) {
const hook = createUseGesture([actions.dragAction, actions.pinchAction, actions.scrollAction, actions.wheelAction, actions.moveAction, actions.hoverAction]);
return hook(handlers, config || {});
}
exports.createUseGesture = createUseGesture;
exports.useDrag = useDrag;
exports.useGesture = useGesture;
exports.useHover = useHover;
exports.useMove = useMove;
exports.usePinch = usePinch;
exports.useScroll = useScroll;
exports.useWheel = useWheel;
Object.keys(actions).forEach(function (k) {
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
enumerable: true,
get: function () { return actions[k]; }
});
});
Object.keys(utils).forEach(function (k) {
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
enumerable: true,
get: function () { return utils[k]; }
});
});
Object.keys(types).forEach(function (k) {
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
enumerable: true,
get: function () { return types[k]; }
});
});
+81
View File
@@ -0,0 +1,81 @@
import { registerAction, dragAction, pinchAction, wheelAction, scrollAction, moveAction, hoverAction } from '@use-gesture/core/actions';
export * from '@use-gesture/core/actions';
import React from 'react';
import { Controller, parseMergedHandlers } from '@use-gesture/core';
export * from '@use-gesture/core/utils';
export * from '@use-gesture/core/types';
function useRecognizers(handlers, config = {}, gestureKey, nativeHandlers) {
const ctrl = React.useMemo(() => new Controller(handlers), []);
ctrl.applyHandlers(handlers, nativeHandlers);
ctrl.applyConfig(config, gestureKey);
React.useEffect(ctrl.effect.bind(ctrl));
React.useEffect(() => {
return ctrl.clean.bind(ctrl);
}, []);
if (config.target === undefined) {
return ctrl.bind.bind(ctrl);
}
return undefined;
}
function useDrag(handler, config) {
registerAction(dragAction);
return useRecognizers({
drag: handler
}, config || {}, 'drag');
}
function usePinch(handler, config) {
registerAction(pinchAction);
return useRecognizers({
pinch: handler
}, config || {}, 'pinch');
}
function useWheel(handler, config) {
registerAction(wheelAction);
return useRecognizers({
wheel: handler
}, config || {}, 'wheel');
}
function useScroll(handler, config) {
registerAction(scrollAction);
return useRecognizers({
scroll: handler
}, config || {}, 'scroll');
}
function useMove(handler, config) {
registerAction(moveAction);
return useRecognizers({
move: handler
}, config || {}, 'move');
}
function useHover(handler, config) {
registerAction(hoverAction);
return useRecognizers({
hover: handler
}, config || {}, 'hover');
}
function createUseGesture(actions) {
actions.forEach(registerAction);
return function useGesture(_handlers, _config) {
const {
handlers,
nativeHandlers,
config
} = parseMergedHandlers(_handlers, _config || {});
return useRecognizers(handlers, config, undefined, nativeHandlers);
};
}
function useGesture(handlers, config) {
const hook = createUseGesture([dragAction, pinchAction, scrollAction, wheelAction, moveAction, hoverAction]);
return hook(handlers, config || {});
}
export { createUseGesture, useDrag, useGesture, useHover, useMove, usePinch, useScroll, useWheel };
+43
View File
@@ -0,0 +1,43 @@
{
"name": "@use-gesture/react",
"version": "10.3.1",
"description": "React target for @use-gesture",
"keywords": [
"react",
"hook",
"gesture",
"mouse",
"trackpad",
"touch",
"drag",
"pinch",
"rotate",
"scale",
"zoom",
"scroll",
"wheel"
],
"license": "MIT",
"sideEffects": false,
"main": "dist/use-gesture-react.cjs.js",
"module": "dist/use-gesture-react.esm.js",
"repository": {
"type": "git",
"url": "git+https://github.com/pmndrs/use-gesture.git",
"directory": "packages/react"
},
"bugs": {
"url": "https://github.com/pmndrs/use-gesture/issues"
},
"author": "Paul Henschel",
"contributors": [
"David Bismut (https://github.com/dbismut)"
],
"homepage": "https://use-gesture.netlify.app",
"peerDependencies": {
"react": ">= 16.8.0"
},
"dependencies": {
"@use-gesture/core": "10.3.1"
}
}
+16
View File
@@ -0,0 +1,16 @@
import { parseMergedHandlers } from '@use-gesture/core'
import { registerAction } from '@use-gesture/core/actions'
import { Action, GestureHandlers, UserGestureConfig } from '@use-gesture/core/types'
import { useRecognizers } from './useRecognizers'
export function createUseGesture(actions: Action[]) {
actions.forEach(registerAction)
return function useGesture<Config extends UserGestureConfig = UserGestureConfig>(
_handlers: GestureHandlers,
_config?: Config
) {
const { handlers, nativeHandlers, config } = parseMergedHandlers(_handlers, _config || {})
return useRecognizers<Config>(handlers, config, undefined, nativeHandlers)
}
}
+12
View File
@@ -0,0 +1,12 @@
export { useDrag } from './useDrag'
export { usePinch } from './usePinch'
export { useWheel } from './useWheel'
export { useScroll } from './useScroll'
export { useMove } from './useMove'
export { useHover } from './useHover'
export { useGesture } from './useGesture'
export { createUseGesture } from './createUseGesture'
export * from '@use-gesture/core/utils'
export * from '@use-gesture/core/actions'
export * from '@use-gesture/core/types'
+36
View File
@@ -0,0 +1,36 @@
/* eslint-disable react-hooks/rules-of-hooks */
/* Type tests for @use-gesture/react */
import { useRef } from 'react'
import { expectType } from 'tsd'
import { useDrag, useGesture } from '.'
import { ReactDOMAttributes } from './types'
/* Checks that gesture hooks return event props handlers */
expectType<(...args: any[]) => ReactDOMAttributes>(useDrag(() => {}))
/* Checks that gesture hooks don't return any value when used with config option `target` */
expectType<void>(useDrag(() => {}, { target: window }))
/* Checks that hooks accept generics to cast event type */
useDrag<MouseEvent>(({ event }) => expectType<MouseEvent>(event))
const fakeDiv = 'fake' as any as HTMLDivElement
const fakeRef = useRef<HTMLDivElement>(null)
/* Checks config.bounds type for useDrag */
useDrag(() => {}, { bounds: { left: 0 } })
useDrag(() => {}, { bounds: fakeDiv })
useDrag(() => {}, { bounds: fakeRef })
/* Checks that useGesture returns event props handler */
expectType<(...args: any[]) => ReactDOMAttributes>(useGesture({ onPinch: () => {} }))
/* Checks that useGesture doesn't return any value when used with config option `target` */
expectType<void>(useGesture({ onPinch: () => {} }, { target: window }))
/* Checks that useGesture accepts generics to cast event type */
useGesture<{ drag: MouseEvent; pinch: WheelEvent; onClick: PointerEvent }>({
onDrag: ({ event }) => expectType<MouseEvent>(event),
onPinch: ({ event }) => expectType<WheelEvent>(event),
onClick: ({ event }) => expectType<PointerEvent>(event)
})
+5
View File
@@ -0,0 +1,5 @@
import { DOMHandlers } from '@use-gesture/core/types'
export type ReactDOMAttributes = {
[Key in keyof DOMHandlers]: React.DOMAttributes<EventTarget>[Key]
}
+17
View File
@@ -0,0 +1,17 @@
import { registerAction, dragAction } from '@use-gesture/core/actions'
import { EventTypes, Handler, UserDragConfig } from '@use-gesture/core/types'
import { useRecognizers } from './useRecognizers'
/**
* Drag hook.
*
* @param {Handler<'drag'>} handler - the function fired every time the drag gesture updates
* @param {UserDragConfig} config - the config object including generic options and drag options
*/
export function useDrag<EventType = EventTypes['drag'], Config extends UserDragConfig = UserDragConfig>(
handler: Handler<'drag', EventType>,
config?: Config
) {
registerAction(dragAction)
return useRecognizers({ drag: handler }, config || {}, 'drag')
}
+19
View File
@@ -0,0 +1,19 @@
import { dragAction, pinchAction, scrollAction, wheelAction, moveAction, hoverAction } from '@use-gesture/core/actions'
import { GestureHandlers, UserGestureConfig, EventTypes, AnyHandlerEventTypes } from '@use-gesture/core/types'
import { createUseGesture } from './createUseGesture'
/**
* @public
*
* The most complete gesture hook, allowing support for multiple gestures.
*
* @param {GestureHandlers} handlers - an object with on[Gesture] keys containg gesture handlers
* @param {UserGestureConfig} config - the full config object
*/
export function useGesture<
HandlerTypes extends AnyHandlerEventTypes = EventTypes,
Config extends UserGestureConfig = UserGestureConfig
>(handlers: GestureHandlers<HandlerTypes>, config?: Config) {
const hook = createUseGesture([dragAction, pinchAction, scrollAction, wheelAction, moveAction, hoverAction])
return hook(handlers, config || ({} as Config))
}
+17
View File
@@ -0,0 +1,17 @@
import { registerAction, hoverAction } from '@use-gesture/core/actions'
import { EventTypes, UserHoverConfig, Handler } from '@use-gesture/core/types'
import { useRecognizers } from './useRecognizers'
/**
* Hover hook.
*
* @param {Handler<'hover'>} handler - the function fired every time the hover gesture updates
* @param {UserHoverConfig} config - the config object including generic options and hover options
*/
export function useHover<EventType = EventTypes['hover'], Config extends UserHoverConfig = UserHoverConfig>(
handler: Handler<'hover', EventType>,
config?: Config
) {
registerAction(hoverAction)
return useRecognizers({ hover: handler }, config || {}, 'hover')
}
+17
View File
@@ -0,0 +1,17 @@
import { registerAction, moveAction } from '@use-gesture/core/actions'
import { UserMoveConfig, Handler, EventTypes } from '@use-gesture/core/types'
import { useRecognizers } from './useRecognizers'
/**
* Move hook.
*
* @param {Handler<'move'>} handler - the function fired every time the move gesture updates
* @param {UserMoveConfig} config - the config object including generic options and move options
*/
export function useMove<EventType = EventTypes['move'], Config extends UserMoveConfig = UserMoveConfig>(
handler: Handler<'move', EventType>,
config?: Config
) {
registerAction(moveAction)
return useRecognizers({ move: handler }, config || {}, 'move')
}
+17
View File
@@ -0,0 +1,17 @@
import { registerAction, pinchAction } from '@use-gesture/core/actions'
import { UserPinchConfig, Handler, EventTypes } from '@use-gesture/core/types'
import { useRecognizers } from './useRecognizers'
/**
* Pinch hook.
*
* @param {Handler<'pinch'>} handler - the function fired every time the pinch gesture updates
* @param {UserPinchConfig} config - the config object including generic options and pinch options
*/
export function usePinch<EventType = EventTypes['pinch'], Config extends UserPinchConfig = UserPinchConfig>(
handler: Handler<'pinch', EventType>,
config?: Config
) {
registerAction(pinchAction)
return useRecognizers({ pinch: handler }, config || {}, 'pinch')
}
+44
View File
@@ -0,0 +1,44 @@
/* eslint-disable react-hooks/exhaustive-deps */
import React from 'react'
import { Controller } from '@use-gesture/core'
import { GenericOptions, GestureKey, InternalHandlers, NativeHandlers } from '@use-gesture/core/types'
import { ReactDOMAttributes } from './types'
type HookReturnType<Config extends GenericOptions> = Config['target'] extends object
? void
: (...args: any[]) => ReactDOMAttributes
/**
* Utility hook called by all gesture hooks and that will be responsible for
* the internals.
*
* @param {InternalHandlers} handlers
* @param {GenericOptions} config
* @param {GestureKey} gestureKey
* @param {NativeHandler} nativeHandlers
* @returns nothing when config.target is set, a binding function when not.
*/
export function useRecognizers<Config extends GenericOptions>(
handlers: InternalHandlers,
config: Config | {} = {},
gestureKey?: GestureKey,
nativeHandlers?: NativeHandlers
): HookReturnType<Config> {
const ctrl = React.useMemo(() => new Controller(handlers), [])
ctrl.applyHandlers(handlers, nativeHandlers)
ctrl.applyConfig(config, gestureKey)
React.useEffect(ctrl.effect.bind(ctrl))
React.useEffect(() => {
return ctrl.clean.bind(ctrl)
}, [])
// When target is undefined we return the bind function of the controller which
// returns prop handlers.
// @ts-ignore
if (config.target === undefined) {
return ctrl.bind.bind(ctrl) as any
}
return undefined as any
}
+17
View File
@@ -0,0 +1,17 @@
import { registerAction, scrollAction } from '@use-gesture/core/actions'
import { UserScrollConfig, Handler, EventTypes } from '@use-gesture/core/types'
import { useRecognizers } from './useRecognizers'
/**
* Scroll hook.
*
* @param {Handler<'scroll'>} handler - the function fired every time the scroll gesture updates
* @param {UserScrollConfig} config - the config object including generic options and scroll options
*/
export function useScroll<EventType = EventTypes['scroll'], Config extends UserScrollConfig = UserScrollConfig>(
handler: Handler<'scroll', EventType>,
config?: Config
) {
registerAction(scrollAction)
return useRecognizers({ scroll: handler }, config || {}, 'scroll')
}
+17
View File
@@ -0,0 +1,17 @@
import { registerAction, wheelAction } from '@use-gesture/core/actions'
import { UserWheelConfig, Handler, EventTypes } from '@use-gesture/core/types'
import { useRecognizers } from './useRecognizers'
/**
* Wheel hook.
*
* @param {Handler<'wheel'>} handler - the function fired every time the wheel gesture updates
* @param {UserWheelConfig} config - the config object including generic options and wheel options
*/
export function useWheel<EventType = EventTypes['wheel'], Config extends UserWheelConfig = UserWheelConfig>(
handler: Handler<'wheel', EventType>,
config?: Config
) {
registerAction(wheelAction)
return useRecognizers({ wheel: handler }, config || {}, 'wheel')
}