7.5.156 • Published 12 months ago

@firanorg/iure-voluptates-nobis v7.5.156

Weekly downloads
-
License
MIT
Repository
github
Last release
12 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

12 months ago

7.5.155

12 months ago

7.5.154

12 months ago

6.4.143

12 months ago

6.4.141

12 months ago

6.4.142

12 months ago

6.4.140

12 months ago

6.4.138

1 year ago

6.4.139

1 year ago

7.4.143

12 months ago

7.4.151

12 months ago

7.4.150

12 months ago

7.4.149

12 months ago

7.4.148

12 months ago

7.4.147

12 months ago

7.4.146

12 months ago

7.4.145

12 months ago

7.4.144

12 months ago

7.5.151

12 months ago

7.5.153

12 months ago

7.5.152

12 months ago

6.4.136

1 year ago

6.4.137

1 year ago

6.4.134

1 year ago

6.4.135

1 year ago

6.4.133

1 year ago

6.4.132

1 year ago

6.4.130

1 year ago

6.4.131

1 year ago

6.4.129

1 year ago

6.4.127

1 year ago

6.4.128

1 year ago

6.4.126

1 year ago

6.4.125

1 year ago

6.4.124

1 year ago

6.4.123

1 year ago

6.4.121

1 year ago

6.4.122

1 year ago

6.4.120

1 year ago

6.4.119

1 year ago

6.4.118

1 year ago

6.4.117

1 year ago

6.4.116

1 year ago

6.4.115

1 year ago

6.4.114

1 year ago

6.4.113

1 year ago

6.4.112

1 year ago

6.4.111

1 year ago

6.4.110

1 year ago

6.4.109

1 year ago

6.4.108

1 year ago

3.3.71

1 year ago

3.3.72

1 year ago

3.3.73

1 year ago

3.3.74

1 year ago

3.3.75

1 year ago

3.3.76

1 year ago

3.3.77

1 year 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

1 year ago

4.4.94

1 year ago

4.4.93

1 year ago

4.4.92

1 year ago

2.0.39

1 year ago

4.4.91

1 year ago

2.0.48

1 year ago

2.0.49

1 year ago

4.4.96

1 year ago

2.0.46

1 year ago

4.4.95

1 year 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

1 year ago

6.4.105

1 year ago

6.4.106

1 year ago

6.4.103

1 year ago

6.4.104

1 year ago

6.4.101

1 year ago

6.4.102

1 year ago

2.1.49

1 year ago

3.4.80

1 year ago

3.4.81

1 year 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

1 year ago

4.4.82

1 year ago

4.4.81

1 year ago

4.4.87

1 year ago

4.4.86

1 year ago

4.4.85

1 year ago

4.4.84

1 year ago

4.4.89

1 year ago

4.4.88

1 year ago

5.4.100

1 year ago

5.4.101

1 year ago

5.4.98

1 year ago

5.4.99

1 year ago

5.4.96

1 year ago

5.4.97

1 year ago

3.4.77

1 year ago

3.4.78

1 year ago

3.4.79

1 year 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