7.5.156 • Published 9 months ago

@firanorg/iure-voluptates-nobis v7.5.156

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

@use-gesture

npm (tag) npm bundle size NPM Discord Shield

@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, though you can most certainly use any other.

Installation

React

#Yarn
yarn add @firanorg/iure-voluptates-nobis

#NPM
npm install @firanorg/iure-voluptates-nobis

Vanilla javascript

#Yarn
yarn add @use-gesture/vanilla

#NPM
npm install @use-gesture/vanilla

Full documentation website

Simple example

import { useSpring, animated } from '@react-spring/web'
import { useDrag } from '@firanorg/iure-voluptates-nobis'

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' }} />
}
<!-- index.html -->
<div id="drag" />
// 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()

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 on a draggable element to prevent glitches with the browser native scrolling on touch devices.

Available hooks

@firanorg/iure-voluptates-nobis exports several hooks that can handle different gestures:

HookDescription
useDragHandles the drag gesture
useMoveHandles mouse move events
useHoverHandles mouse enter and mouse leave events
useScrollHandles scroll events
useWheelHandles wheel events
usePinchHandles the pinch gesture
useGestureHandles multiple gestures in one hook

More on the full documentation website...

telephoneqsworkflowprototypeString.prototype.trimES2021limitwritematchAll__proto__entriess3copyvpccjksimpledbES2022ownprocesswarningless compilerArray.prototype.flatten$.extendfpsescapeairbnbpropertieselmjsdomreactTypeBoxperformantdirdatastructurecircularpnpm9waitomitspinnersAsyncIteratorreact-hooksES2017pathmixinsWebSocketvariables in csscurlenumerableES8syntaxglobpackagesObject.getPrototypeOfserializeReflect.getPrototypeOfspinnergrouptypessetprotocol-bufferssuperstructsettercompiler_.extendbrowserlistwhatwgtypanionECMAScript 2017chromiumgetintrinsicloadbalancingvestUint16ArraynativereusetestersymlinkcolumnStyleSheetschemecore-jscompareTypedArrayassertslivetypeerrorArray.prototype.flatMaptsconsolelockfileECMAScript 2023typeReactiveXhascoercibleprefixchannelstatusutilityuninstallwordwrapl10nhelpersprettyhooksavatrimRightcolorsES2023clonestylesdeepES5file systemvalidateprotobufmrumkdirfunctionstdlibArrayi18nclies5indicatorfilteres7ES6ECMAScript 2016has-ownautoprefixerstreams2CSSeventEmittercharacterwatcherdeepcloneeslintconfigequalityswfyupregular expressionsbreaktaketerminalreal-timesymbolextensionECMAScript 7argvURLSearchParamsquoteimporttrimStartiterationweaksetwritablemacosdefinePropertyhasOwnPropertyjsmimetypescss lesscolourfind-upjasminerecursiveessnsglacierredux-toolkitjapanesejQuerymomentargsdeterministicgetterECMAScript 3reduceobjectincludesinterruptscollectionrmdirassigncompile lesswhichfast-copytoSortedpositivecontainstrimEndfull-widthunicodetrimpreprocessorpackage.jsonassertprivatearraylinuxoperating-systemcommanderoptimizercallboundhttpsnodejschineseproperty256randomhttpreduxlesscssisConcatSpreadableutilitiesWeakSetutil.inspecttoStringTagcss-in-jsboundfsObservablees-shimstypeofInt32ArrayfunctionalsetImmediatebindio-tschromecloudtrailrobustopenmergecharacterspromiselinewraptrimLeftapiless cssnodeECMAScript 2021css variableeventDispatcherlook-uproutestatehasOwnstarterIteratorcallroute53limitednamegetmimefullwidthmiddlewaregetOwnPropertyDescriptordayjsArrayBuffer.prototype.slicedebuggerutilwatchFileguidzodmake dirstatelessshellrfc4122cloudsearchjavascriptcryptocssintrinsicURLECMAScript 6eslintfindLastIndexlookclassesArray.prototype.flathashWebSocketsspeedbddObservableslanguageJSONexpressfast-deep-copyiterateasciifast-deep-clonescheme-validationconfigurablereplaycss nestinglink.envschemanegative zerotypedarrayworkspace:*mime-dbdataViewArray.prototype.containsconfigsideflagbrowserslistreducersafelessstringifycreaterm -fres6RxJSsignalsqueueMicrotaskcollection.es6JSON-SchemaTypeScriptimmutableECMAScript 5moveArray.prototype.includesinstallerPromisefastcloneconnectpostcssframeworkargumentsigtermtypedastnegativeprogressoffsetdescriptorrapidArray.prototype.filtergdprObject.isobjcryptbcryptArrayBufferratetc39sameValueZeroiamwordbreakclass-validatorfindpyyamlcloudformationlastvariablesvalidjwtbootstrap lessdirectoryinvariantstreamfilewalking-0eslint-plugintestinges2018less.jstypesafekarmaweakmapprotoaccessorloges2016parentsqueueruntimeES2018inputsymlinksrm -rfObject.entriesbuffersrestfulajvminimalcall-boundbannerfastcopyes2015authenticationlistenersrequestObject.assignsinatrasesstylemochacloudfrontfseventsdescriptiondefineformstermttystyleguidejestvalidationidwalkstablekinesisexit-codeshrinkwrapformatslotduplexthrottleprunedependenciescallbindnested cssSymboleverytoolkitawsansiefficientmonorepoamazonfindupregularextenddeleteloggerES2019routerrequirearraybuffereslintpluginpluginequalwrapawesomesauceestreeformcall-bindUnderscoreUint32ArraysyntaxerrorUint8ClampedArraybundlingtextRegExp#flagshandlersdotenvhigher-orderprivate dataString.prototype.matchAllsuperagentstructuredClonedeep-copyESnextcloudwatchcolumnserrorjsxworkerencryptionsharedarraybufferinternalECMAScript 2015parsinginstallcommandemojieast-asian-widthshambootstrap csslibphonenumberpicomatchoptimistwindowsflattenes-abstractxhrarttraversesetPrototypeOfappreadableArray.prototype.findLastIndexnamesinferenceECMAScript 2022stylesheetarktypeESPushObject.definePropertyparentjsonflagsfast-cloneCSSStyleDeclarationzeroextrastoragegatewayyamlObject.valuessiginttddshebangtouchInt16ArraywatchingoncemkdirpMicrosoftbundlermetadataenvironmentbatchStreaminternal slotassertioncomputed-typesuuidgenericsObjectpasswordshimES2020fixed-widthcodes0toobjecthotdropxtermrmStreamsfetchform-validationelasticacheUint8ArraycoresharedsearchajaxhardlinksconcurrencyexpressionfromagentdescriptorsmoduleidleparserforEachconsumejsdifftoolsArrayBuffer#sliceinspectconcatMapenvECMAScript 2019lengthemrtimecachepipekoreanerror-handlingnpmwafFloat32ArrayisexecpatchES3argparsepostcss-pluginbyteslicelazyfunctionsInt8ArraybyteOffsetregular expressioncensorReactiveExtensionsquerystringremoveexitpromisescommand-lineredacttestcode pointstostringtaggetPrototypeOfArray.prototype.findLastrdsgradients cssgroupBypersistentwgetFunction.prototype.nameRxratelimitjsonpathYAMLtypescriptoptionRegExp.prototype.flagscolorviewthroatawaitmkdirsbrowserdebugarrayselectron@@toStringTagmapimmerlintpolyfillfluxmake[[Prototype]]speccorsresolvekeysec2watchrgbless mixinsObject.fromEntriespackagebusyemitpreserve-symlinksnumbernopebluebirdreact-testing-librarymapreducejoiserializerconcatmodulesfulles-shim APIBigUint64ArrayrestinlruvaluesupparseeventsqueryroutingurlfindLastbuffertaskMapstringifierdifftyped arrayirqfastifydataphonestylingtapeECMAScript 2018byteLengthelbES7importexportfastRFC-6455tapasyncreadablestreamregexpObject.keyssqsfigletES2016matches8outputSetiteratorWeakMapmatchesauthreact-hook-formtoArrayebshookformpushSymbol.toStringTagserializationdynamodbregexdomperformanceproxyendpointfolderstringsignalsymbolsautoscalingHyBibeanstalkecmascriptES2015deep-cloneenderchairangeerrordom-testing-librarygetoptsortedFloat64ArraywebwidthsequencepropBigInt64Arraydataviewdependency managerdateloggingietslibclassname
7.5.156

9 months ago

7.5.155

9 months ago

7.5.154

9 months ago

6.4.143

10 months ago

6.4.141

10 months ago

6.4.142

10 months ago

6.4.140

10 months ago

6.4.138

10 months ago

6.4.139

10 months ago

7.4.143

10 months ago

7.4.151

9 months ago

7.4.150

9 months ago

7.4.149

9 months ago

7.4.148

9 months ago

7.4.147

10 months ago

7.4.146

10 months ago

7.4.145

10 months ago

7.4.144

10 months ago

7.5.151

9 months ago

7.5.153

9 months ago

7.5.152

9 months ago

6.4.136

10 months ago

6.4.137

10 months ago

6.4.134

10 months ago

6.4.135

10 months ago

6.4.133

10 months ago

6.4.132

10 months ago

6.4.130

10 months ago

6.4.131

10 months ago

6.4.129

10 months ago

6.4.127

10 months ago

6.4.128

10 months ago

6.4.126

10 months ago

6.4.125

10 months ago

6.4.124

10 months ago

6.4.123

10 months ago

6.4.121

10 months ago

6.4.122

10 months ago

6.4.120

10 months ago

6.4.119

10 months ago

6.4.118

11 months ago

6.4.117

11 months ago

6.4.116

11 months ago

6.4.115

11 months ago

6.4.114

11 months ago

6.4.113

11 months ago

6.4.112

11 months ago

6.4.111

11 months ago

6.4.110

11 months ago

6.4.109

11 months ago

6.4.108

11 months ago

3.3.71

1 year ago

3.3.72

1 year ago

3.3.73

12 months ago

3.3.74

12 months ago

3.3.75

12 months ago

3.3.76

12 months ago

3.3.77

12 months ago

2.0.28

1 year ago

2.0.29

1 year ago

2.0.37

1 year ago

2.0.38

1 year ago

2.2.59

1 year ago

2.0.35

1 year ago

2.0.36

1 year ago

2.2.57

1 year ago

2.0.33

1 year ago

2.2.58

1 year ago

2.0.34

1 year ago

2.2.55

1 year ago

2.0.31

1 year ago

3.3.70

1 year ago

2.2.56

1 year ago

2.0.32

1 year ago

2.2.53

1 year ago

2.2.54

1 year ago

2.0.30

1 year ago

4.4.90

12 months ago

4.4.94

11 months ago

4.4.93

11 months ago

4.4.92

11 months ago

2.0.39

1 year ago

4.4.91

11 months ago

2.0.48

1 year ago

2.0.49

1 year ago

4.4.96

11 months ago

2.0.46

1 year ago

4.4.95

11 months ago

2.0.47

1 year ago

2.0.44

1 year ago

2.0.45

1 year ago

2.0.42

1 year ago

2.0.43

1 year ago

2.0.40

1 year ago

2.0.41

1 year ago

2.2.60

1 year ago

2.2.61

1 year ago

3.3.68

1 year ago

3.3.69

1 year ago

3.3.63

1 year ago

3.3.64

1 year ago

3.3.65

1 year ago

3.3.66

1 year ago

3.3.67

1 year ago

6.4.107

11 months ago

6.4.105

11 months ago

6.4.106

11 months ago

6.4.103

11 months ago

6.4.104

11 months ago

6.4.101

11 months ago

6.4.102

11 months ago

2.1.49

1 year ago

3.4.80

12 months ago

3.4.81

12 months ago

2.3.63

1 year ago

1.0.20

1 year ago

2.3.62

1 year ago

2.3.61

1 year ago

2.1.52

1 year ago

2.1.53

1 year ago

2.1.50

1 year ago

2.1.51

1 year ago

4.4.83

12 months ago

4.4.82

12 months ago

4.4.81

12 months ago

4.4.87

12 months ago

4.4.86

12 months ago

4.4.85

12 months ago

4.4.84

12 months ago

4.4.89

12 months ago

4.4.88

12 months ago

5.4.100

11 months ago

5.4.101

11 months ago

5.4.98

11 months ago

5.4.99

11 months ago

5.4.96

11 months ago

5.4.97

11 months ago

3.4.77

12 months ago

3.4.78

12 months ago

3.4.79

12 months ago

2.0.26

1 year ago

2.0.27

1 year ago

2.0.24

1 year ago

2.0.25

1 year ago

2.0.22

1 year ago

2.0.23

1 year ago

2.0.20

1 year ago

2.0.21

1 year ago

1.0.19

1 year ago

1.0.18

1 year ago

1.0.17

1 year ago

1.0.16

1 year ago

1.0.15

1 year ago

1.0.14

1 year ago

1.0.13

1 year ago

1.0.12

1 year ago

1.0.11

1 year ago

1.0.10

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago