@firanorg/iure-voluptates-nobis NPM | npm.io

7.5.156 • Published 10 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

10 months ago

@use-gesture

npm bundle size NPM

@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:

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...

telephone qs workflow prototype String.prototype.trim ES2021 limit write matchAll __proto__entries s3 copy vpc cjk simpledb ES2022 own process warning less compiler Array.prototype.flatten $.extend fps escape airbnb properties elm jsdom react TypeBox performant dir datastructure circular pnpm9 wait omit spinners AsyncIterator react-hooks ES2017 path mixins WebSocket variables in css curl enumerable ES8 syntax glob packages Object.getPrototypeOf serialize Reflect.getPrototypeOf spinner group types set protocol-buffers superstruct setter compiler _.extend browserlist whatwg typanion ECMAScript 2017 chromium getintrinsic loadbalancing vest Uint16Array native reuse tester symlink column StyleSheet scheme core-js compare TypedArray asserts live typeerror Array.prototype.flatMap ts console lockfile ECMAScript 2023 type ReactiveX has coercible prefix channel status utility uninstall wordwrap l10n helpers pretty hooks ava trimRight colors ES2023 clone styles deep ES5 file system validate protobuf mru mkdir function stdlib Array i18n cli es5 indicator filter es7 ES6 ECMAScript 2016 has-own autoprefixer streams2 CSS eventEmitter character watcher deepclone eslintconfig equality swf yup regular expressions break take terminal real-time symbol extension ECMAScript 7 argv URLSearchParams quote import trimStart iteration weakset writable macos defineProperty hasOwnProperty js mimetypes css less colour find-up jasmine recursive es sns glacier redux-toolkit japanese jQuery moment args deterministic getter ECMAScript 3 reduce object includes interrupts collection rmdir assign compile less which fast-copy toSorted positive contains trimEnd full-width unicode trim preprocessor package.json assert private array linux operating-system commander optimizer callbound https nodejs chinese property 256 random http redux lesscss isConcatSpreadable utilities WeakSet util.inspect toStringTag css-in-js bound fs Observable es-shims typeof Int32Array functional setImmediate bind io-ts chrome cloudtrail robust open merge characters promise linewrap trimLeft api less css node ECMAScript 2021 css variable eventDispatcher look-up route state hasOwn starter Iterator call route53 limited name get mime fullwidth middleware getOwnPropertyDescriptor dayjs ArrayBuffer.prototype.slice debugger util watchFile guid zod make dir stateless shell rfc4122 cloudsearch javascript crypto css intrinsic URL ECMAScript 6 eslint findLastIndex look classes Array.prototype.flat hash WebSockets speed bdd Observables language JSON express fast-deep-copy iterate ascii fast-deep-clone scheme-validation configurable replay css nesting link .env schema negative zero typedarray workspace:*mime-db dataView Array.prototype.contains config side flag browserslist reducer safe less stringify create rm -fr es6 RxJS signals queueMicrotask collection.es6 JSON-Schema TypeScript immutable ECMAScript 5 move Array.prototype.includes installer Promise fastclone connect postcss framework argument sigterm typed ast negative progress offset descriptor rapid Array.prototype.filter gdpr Object.is obj crypt bcrypt ArrayBuffer rate tc39 sameValueZero iam wordbreak class-validator find pyyaml cloudformation last variables valid jwt bootstrap less directory invariant stream file walking -0 eslint-plugin testing es2018 less.js typesafe karma weakmap proto accessor log es2016 parents queue runtime ES2018 input symlinks rm -rf Object.entries buffers restful ajv minimal call-bound banner fastcopy es2015 authentication listeners request Object.assign sinatra ses style mocha cloudfront fsevents description define forms term tty styleguide jest validation id walk stable kinesis exit-code shrinkwrap format slot duplex throttle prune dependencies callbind nested css Symbol every toolkit aws ansi efficient monorepo amazon findup regular extend delete logger ES2019 router require arraybuffer eslintplugin plugin equal wrap awesomesauce estree form call-bind Underscore Uint32Array syntaxerror Uint8ClampedArray bundling text RegExp#flags handlers dotenv higher-order private data String.prototype.matchAll superagent structuredClone deep-copy ESnext cloudwatch columns error jsx worker encryption sharedarraybuffer internal ECMAScript 2015 parsing install command emoji east-asian-width sham bootstrap css libphonenumber picomatch optimist windows flatten es-abstract xhr art traverse setPrototypeOf app readable Array.prototype.findLastIndex names inference ECMAScript 2022 stylesheet arktype ES Push Object.defineProperty parent json flags fast-clone CSSStyleDeclaration zero extra storagegateway yaml Object.values sigint tdd shebang touch Int16Array watching once mkdirp Microsoft bundler metadata environment batch Stream internal slot assertion computed-types uuid generics Object password shim ES2020 fixed-width codes 0 toobject hot drop xterm rm Streams fetch form-validation elasticache Uint8Array core shared search ajax hardlinks concurrency expression from agent descriptors module idle parser forEach consume jsdiff tools ArrayBuffer#slice inspect concatMap env ECMAScript 2019 length emr time cache pipe korean error-handling npm waf Float32Array is exec patch ES3 argparse postcss-plugin byte slice lazy functions Int8Array byteOffset regular expression censor ReactiveExtensions querystring remove exit promises command-line redact test code points tostringtag getPrototypeOf Array.prototype.findLast rds gradients css groupBy persistent wget Function.prototype.name Rx ratelimit jsonpath YAML typescript option RegExp.prototype.flags color view throat await mkdirs browser debug arrays electron @@toStringTag map immer lint polyfill flux make [[Prototype]]spec cors resolve keys ec2 watch rgb less mixins Object.fromEntries package busy emit preserve-symlinks number nope bluebird react-testing-library mapreduce joi serializer concat modules full es-shim API BigUint64Array rest in lru values up parse events query routing url findLast buffer task Map stringifier diff typed array irq fastify data phone styling tape ECMAScript 2018 byteLength elb ES7 importexport fast RFC-6455 tap async readablestream regexp Object.keys sqs figlet ES2016 match es8 output Set iterator WeakMap matches auth react-hook-form toArray ebs hookform push Symbol.toStringTag serialization dynamodb regex dom performance proxy endpoint folder string signal symbols autoscaling HyBi beanstalk ecmascript ES2015 deep-clone ender chai rangeerror dom-testing-library getopt sorted Float64Array web width sequence prop BigInt64Array dataview dependency manager date logging ie tslib classname

@firanorg/amet-consectetur-veniam @firanorg/bookish-broccoli @firanorg/commodi-recusandae-provident @firanorg/dolorem-architecto-eum @firanorg/doloribus-dignissimos-nulla @firanorg/earum-impedit-cupiditate @firanorg/effective-octo @firanorg/eligendi-aut-ducimus @firanorg/et-non-error @firanorg/fuga-architecto-beatae @firanorg/fugit-aliquam-nobis @firanorg/illo-vel-est @firanorg/improved-succotash @firanorg/ipsum-at-pariatur @firanorg/minima-officiis-earum @firanorg/mollitia-molestias-accusamus @firanorg/necessitatibus-sunt-quia @firanorg/optio-velit-culpa @firanorg/placeat-illo-dolorem @firanorg/quia-dolores-occaecati @firanorg/ratione-iusto-numquam @firanorg/repellat-expedita-autem @firanorg/sapiente-facere-aut @firanorg/scaling-goggles @firanorg/sit-ex-nostrum @firanorg/soluta-perferendis-tenetur @firanorg/voluptatem-culpa-iusto @firanorg/voluptatem-odit-et @firanorg/voluptatibus-soluta-dignissimos corcojs-qrcode corcojs-qrcode-logo corcojs-qrcode-sample dable-effect firan-logging simple-prompts-web3

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago