@use-gesture is a library that let you bind richer mouse and touch events to any component or view.

Last update: Jun 23, 2022

@use-gesture

npm (tag) npm bundle size NPM Discord Shield

@use-gesture is a library that let 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.

The demos are real click them!

Installation

React

#Yarn
yarn add @use-gesture/react

#NPM
npm install @use-gesture/react

Vanilla javascript

#Yarn
yarn add @use-gesture/vanilla

#NPM
npm install @use-gesture/vanilla

Full documentation website

Simple example

React
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' }} />
}
Vanilla javascript
">

<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

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

GitHub

https://github.com/pmndrs/use-gesture
Comments
  • 1. How to use onClick and onDrag together?

    I'm using react-use-gesture and react-spring to create moveable divs like so: https://codesandbox.io/s/xmqwz

    import React, { useState } from 'react'
    import { render } from 'react-dom'
    import { useGesture } from 'react-use-gesture'
    import { useSprings, animated } from 'react-spring'
    import './styles.css'
    
    const addVectors = (v1, v2) => [v1[0] + v2[0], v1[1] + v2[1]]
    
    const Moveables = ({ items }) => {
      const [selectedItems, setSelectedItems] = useState([])
    
      const toggleSelectedItem = item => {
        const { id } = item
        if (selectedItems.some(item => item.id === id)) {
          setSelectedItems(selectedItems.filter(item => item.id !== id))
        } else {
          setSelectedItems(oldState => [...oldState, item])
        }
      }
    
      const [springs, setSprings] = useSprings(items.length, index => ({
        xy: items[index].position,
        zIndex: 0
      }))
    
      const binds = useGesture({
        onDrag: ({ args: [itemIndex], delta, temp = springs[itemIndex].xy.getValue() }) => {
          const selectedItemIndexes = []
          items.forEach(({ id }, index) => {
            if (selectedItems.some(item => item.id === id)) {
              selectedItemIndexes.push(index)
            }
          })
    
          setSprings(index => {
            const animationValues = selectedItemIndexes.includes(index)
              ? {
                  xy: addVectors(delta, temp),
                  zIndex: 1
                }
              : undefined
            return animationValues
          })
          return temp
        }
      })
    
      return (
        <div className="content">
          {springs.map(({ xy, zIndex }, index) => {
            const item = items[index]
            const { id } = item
            return (
              <animated.div
                key={id}
                style={{
                  zIndex,
                  transform: xy.interpolate((x, y) => `translate3d(${x}px, ${y}px, 0)`),
                  border: selectedItems.some(item => item.id === id) ? '4px solid lightgreen' : '0'
                }}
                {...binds(index)}
                onDoubleClick={() => toggleSelectedItem(item)}>
                {id}
              </animated.div>
            )
          })}
        </div>
      )
    }
    
    render(
      <Moveables
        items={[
          {
            id: 0,
            position: [0, 100]
          },
          {
            id: 1,
            position: [0, 200]
          },
          {
            id: 2,
            position: [0, 0]
          }
        ]}
      />,
      document.getElementById('root')
    )
    

    When double-clicking on a div, it will become selected. When dragging, all selected divs should move at the same time.

    This already works great - except after selecting one div so that it's draggable, double-clicking on any other div in an attempt to select it will cause the first already-selected div to move.

    How can I set this up so that click events don't trigger the onDrag gesture?

    Reviewed by codynova at 2019-06-23 23:49
  • 2. Swiping does not always work

    Describe the bug For some strange reason swiping parameter using drag only works with a mouse and not on an iPhone and sometimes very hard to do using a trackpad on a Mac. Swipe always returns [0,0]. I have tried different options without much success. Works perfectly on Chrome on desktop using a mouse.

    Sandbox or Video https://codesandbox.io/s/rough-bird-33uu4?file=/src/App.js

    Information:

    • React Use Gesture version: tried v9.0.0-beta.11 and 8.0.1
    • Device: iPhone Xs and Macbook Pro
    • OS: iOS 14.3
    • Browser: Mobile Safari, Chrome

    Checklist:

    • [x] I've read the documentation.
    • [x] If this is an issue with drag, I've tried setting touch-action: none to the draggable element.
    Reviewed by spoldman at 2020-12-21 22:32
  • 3. Pinch distance seems to be calculated differently in Safari than in Chrome/Firefox

    Describe the bug The pinch gesture behaves differently on Safari than it does on Chrome/Firefox.

    The initial zoom is the same, but after you zoom in, let go, then start zooming out, the distance calculated seems to be much smaller on Safari than on Chrome/Firefox.

    Sandbox or Video I'm using the demo David made for my last issue.

    Fullscreen app (easiest to see here): https://oj203.csb.app Sandbox: https://codesandbox.io/s/oj203

    Information:

    • React Use Gesture version: Sandbox is 9.0.0-beta.11 (but tested on latest)
    • Device: Mac + Trackpad
    • Browser: Safari
    Reviewed by samselikoff at 2021-02-11 19:01
  • 4. 🔮 v8.0.0 beta available

    Hi all,

    React Use Gesture v8.0.0 is now available on npm with the next tag. You can install it by typing the following command:

    # using yarn
    yarn add [email protected] 
    
    # using npm
    npm install [email protected]
    

    ⚡️Please test this version on your app and report any breaking behavior! ⚡️

    Internal changes

    v8.0.0 is a major rework and refactoring of the code aiming at better structure and performance improvements across renders, thanks to @thephoenixofthevoid.

    Breaking changes

    Pointers (could be controversial)

    The library now resorts to pointer events extensively: this simplifies some of the drag logic significantly, but has two main implications:

    1. The { eventOptions: { pointer: true } } option is now gone. This means that react-use-gesture works out of the box with react-three-fiber 💁‍♂️

    2. Because scrolling cancels pointer events on touch screens, you will need to style your element with touch-action: <value> to make sure the dragging can work properly. The docs for touch-action.

    domTarget option no longer requires useEffect in user land.

    When adding events directly to the dom element using domTarget you no longer need to clean the effect yourself.

    // before
    const bind = useDrag(() => { /* your logic */ }, { domTarget: window })
    React.useEffect(bind, [bind])
    
    // after
    useDrag(() => { /* your logic */ }, { domTarget: window })
    

    Non intentional movements will always fire your handler

    This aims at working with the threshold / filterTaps option.

    In React Use Gesture v7, if you had set the drag threshold option to 10, your useDrag handler would only fire when the x or y displacement of the user gesture would be greater than 10. This is no longer the case in v8. Your handler will fire as soon as the drag is initiated.

    useDrag(({ down, active, movement: [mx] }) => console.log({ down, active, mx }), { threshold: 10 })
    
    // BEFORE
    // mouse down        --> <no output>
    // mouse moves 8px   --> <no output>
    // mouse moves 10px  --> { down: true, active: true,  mx: 10 }
    
    // AFTER
    // mouse down        --> { down: true, active: false, mx: 0 }
    // mouse moves 8px   --> { down: true, active: false, mx: 0 }
    // mouse moves 10px  --> { down: true, active: true,  mx: 10 }
    

    This means that if you have some complex logic in your handler, you may want to wrap it into like so:

    useDrag(({ active }) => {
      if(active) {
        /* your complex logic */
      }
    }, { threshold: 10 })
    

    This changes makes it easy to access initial pointerdown and subsequent pointermove events in userland, and possibly stopPropagation or preventDefault.

    Added features

    v8.0.0 doesn't add many features but:

    1. Drag and pinch now works on multiple dom elements at once #170.
    2. Drag option { filterTaps: true } will also prevent unwanted taps on children elements #173.

    Remaining to be done

    • [x] Make handlers extensible for react-three-fiber #182
    • [x] Fix some types
    • [x] Testing
    • [x] Tree shaking
    • [x] Better API for active when used with filterTaps, threshold, etc.
    • [x] Test with React 17

    Happy testing 🕹

    Reviewed by dbismut at 2020-06-04 15:51
  • 5. 🔮 v7 now in beta!

    Following #109, I've started working on v7, which is now available with the beta tag. You can install it like so:

    yarn add [email protected]
    

    📕 Docs

    React-use-gesture has a proper documentation website!

    ⛱ Sandbox

    You can play with v7 options in this sandbox: https://codesandbox.io/s/react-use-gesture-v7-oft72

    ✅ New features

    All gestures

    • Added threshold config option that will prevent the gesture handler to fire if the gesture displacement hasn't breached a threshold.
    • Added elapsedTime to state that will contain the elapsed time of the gesture (from start to end).

    Coordinates based gestures

    • Added a axis config option that can accept 'x' or 'y' and that will result in the handler only being fired when the gesture is initiated along the specified axis.
    • Added a lockDirection config option that when true will lock the gesture movement in the first intentional axis.
    • Added bounds {top, bottom, left, right}
    • Added rubberbanding to simulate gesture elasticity out of bounds

    useDrag

    • Added threshold config option that will prevent useDrag to fire if the gesture displacement hasn't breached a threshold.
    • Added a filterTaps config option that will fire the drag handler with the tap attribute set to true if the user has tapped and released with a displacement inferior to 3.
    • Added a swipe state option that will help users identify if the gesture was a swipeLeft|Right|Top|Bottom. Swipe recognition can be customized with swipeVelocity and swipeDistance config options.

    ⏳ Progress

    • [x] Support refs
    • [x] useWheel
    • [x] useScroll
    • [x] useMove
    • [x] usePinch 😭
    • [x] Integrate onStart / onEnd
    • [x] Pass on traditional handlers (onClick, onMouseMove, etc.)
    • [x] Test new features 🤯
    • [x] Comment code 😞
    • [x] Write new docs

    If there's any other features you would like this lib to support, this is the right place!

    Reviewed by dbismut at 2019-11-06 10:57
  • 6. Origin correction logic for pinch only works on zoom in, not zoom out

    Hey David – thanks so much for your work on this library & also for chiming in on my video!

    I copied your solution into my project and it's almost all working great, with the exception of zooming out.

    Here's a sandbox and video of what I'm seeing: https://codesandbox.io/s/modern-dew-sfjr8?file=/src/index.js

    https://user-images.githubusercontent.com/2922250/105407341-97679900-5bfb-11eb-94ea-f232eaef513a.mov

    As you can see, zooming out preserves the origin-correction behavior of zooming in, as long as I start zooming out before the original pinch gesture ends. If I stop after zooming in, then start a new zoom-out pinch gesture, the origin calculation is off.

    I noticed in your solution, pinching out to zoom out works correctly regardless if you pause and start a new gesture or not: https://codesandbox.io/s/boring-hertz-sokxs

    I simplified out a few things from your example to mine but couldn't see anything that would affect the correction calculation, so any pointers in the right direction would be much appreciated!

    Information:

    • React Use Gesture version: v9.0.0
    • Device: Mac[e.g. iPhone6]
    • Browser: Chrome and Safari
    Reviewed by samselikoff at 2021-01-21 20:20
  • 7. useDrag - touches is always 0

    Just wanted to let you know, that since the v8 alpha, touches in useDrag is always set to 0.

    According to the documentation it should be set to the "number of fingers touching the screen".

    Just wanted to check, whether this new behaviour is intended or not. Since we have "Multi-target-support" now, I also think it would make more sense to be the "number of fingers touching the target".

    Reviewed by freund17 at 2020-11-24 12:32
  • 8. Memoization of configs in specific hooks

    Please, test this a lot in real applications (not unit tests) before merging. In particular, performance implications and correctness.

    The commits are quite simple.

    There are 2 dependencies added -- they are well known and streamlined. Consider adding them as a devdeps and bundle at the build step.

    Reviewed by thephoenixofthevoid at 2020-04-17 21:17
  • 9. Thoughts

    Hi @dbismut,

    Here's a list of thoughts I had after working on the react conf talk. Most of them involve making it easier to implement gesture animation, but part of the charm of this library for me is how flexible it is, it really lets you handle the gestures as you see fit, and I never had to fight with it to do something custom. So maybe just documenting some patterns or exposing some helper functions could be beneficial?

    1. Although I think the react-use-gesture examples generally use springs for animation during gesture, it seemed to me while I was investigating best practices that during the gesture the movement should be direct manipulation, at least on mobile. However, the velocity args provided by the react-use-gesture hooks could not be simply loaded into the spring provided by react-spring, as I initially thought, since the velocity argument in react-spring seems to represent a different type of value than px/ms. I had to work around this by creating a wrapped useSpring hook that tracked gesture velocity, which I could then send in to the final spring animation. This was probably the biggest source of confusion I had.

    2. One pattern I used quite a lot was a guard like this at the very top of the useDrag handler:

      if (!memo) {
            const isIntentionalGesture =
              Math.abs(movementX) > threshold &&
              Math.abs(movementX) > Math.abs(movementY)
    
            if (!isIntentionalGesture) {
              if (!willTransform) setWillTransform(true)
              return
            }
            memo = x.value - movementX
          }
    

    Basically waiting for some threshold (hysteresis) to be set, and then initiating memo with the spring value minus the threshold difference. And optionally setting willTransform on the element in advance, instead of indiscriminately using the translate3d hack, (although I can't say that I personally found evidence that there was a specific performance benefit to doing it that way, that is what seems to be recommended.)

    1. I hunted around the internet for some best practices in implementing the animations, e.g. the projection and rubberbanding formulas I mentioned in the talk, and made a small utility file of the ones I found most helpful. Having them readily available would have been cool.

    2. Another pattern I found myself repeating was trying to filter out click events in the onDrag handler, I felt the way I did it was hacky and maybe there could have been a better way. I know react-use-gesture has a dragDelay but in general I want to filter based on gesture distance not duration. I think framer motion has a separate tap handler and something like that would be helpful, especially for the common pattern on mobile of animating on tap (e.g. examples #1 and #2 in this article).

    3. I know this isn't the responsibility of the library, but some documentation on touch-action / touch cancellation might be helpful, (I definitely did appreciate the documentation on how to add a cancelable touch handler if necessary!) because it's so important and such an easy thing to miss when you're just starting out.

    4. This is more of a react-spring thing, but just to bring it up: I really wish we could use frequency response / damping ratio to tune springs in react-spring instead of stiffness / damping, it's so so much easier!

    5. I found some of the provided examples to perform poorly on mobile (e.g. the bottom drawer). It might be nice to categorize examples as desktop and mobile optimized, or something like that.

    Thank you again for working on this library!! Please let me know if there's any way I can be helpful.

    Reviewed by aholachek at 2019-10-31 00:42
  • 10. `useDrag` can get stuck in "down" state

    It seems possible to get stuck in a state where down is always true, this seems to happen (sometimes) under certain conditions:

    • mouse button (trackpad) is currently down
    • window is resized while dragging (e.g. via keyboard shortcut)
    • mousebutton is clicked/released outside the window

    Edit: Doesn't even need resize, just releasing the mouse while outside the drag element seems to be enough: https://github.com/pmndrs/use-gesture/issues/376#issuecomment-955688757

    This may seem somewhat of an edge case, but I keep accidentally hitting this while developing and it's very annoying. It doesn't happen every time, I had to do a few takes to capture the problem. It might be timing related. I think I've seen it also happen without a resize, just by releasing the mouse while not over the window, but I may be mistaken, I couldn't reproduce for the screencap. I just know this kept happening to me every few minutes while I was developing, and I don't believe I was resizing windows while the mouse is down that frequently.

    The underlying issue seems to be that the code assumes a pointerup event will always be fired when the mouse button is released, but there's at least one circumstance (described above) where this assumption doesn't hold.

    https://github.com/pmndrs/use-gesture/blob/5b9715c869c2945c8d34178453fcfad11ecc48d9/packages/core/src/engines/Engine.ts#L211-L214

    https://github.com/pmndrs/use-gesture/blob/5b9715c869c2945c8d34178453fcfad11ecc48d9/packages/core/src/Controller.ts#L40-L51

    Sandbox or Video

    https://user-images.githubusercontent.com/43438/139291136-4c1657d9-12e6-4ae0-b55e-a5aabbc90827.mp4

    https://codesandbox.io/s/amazing-poincare-6bv0l?file=/src/index.tsx

    Information:

    • React Use Gesture version: 10.1.1
    • Device: Macbook Pro 2019
    • OS: MacOS 12.0.1
    • Browser: Chrome 95.0.4638.54

    Checklist:

    Reviewed by timoxley at 2021-10-28 16:06
  • 11. onDrag not called when remove a finger

    First, thanks for all your work.

    I have a little issue on the lib : If I drag an item with two fingers, onDrag is called (perfect for my usecase) but when i remove one finger (there is still one finger moving on the item), the function onDrag is not called anymore. If i put two fingers again on the item, onPinch is called but not onDrag.

    Thank you.

    Reviewed by minnits at 2020-05-06 21:56
  • 12. Typescript: Type incompatibility error when using Gesture with the vanilla package

    Describe the bug When using the vanilla package in combination with Typescript, the Gesture class shows a type incompatibility error for the handlers.

    After looking a bit through the underlying type definitions I noticed that the Target type in packages/core/src/types/utils.ts depends on React.RefObject even though the core package does not have a dependency on React types. This results in Target to resolve to any instead and causes the original error.

    // packages/core/src/types/utils.ts:
    export type Target = EventTarget | React.RefObject<EventTarget>
    

    As a workaround additionally installing @types/react solves the issue.

    Sandbox https://codesandbox.io/s/nifty-diffie-8mfxcw?file=/src/index.ts:0-114

    import { Gesture } from "@use-gesture/vanilla";
    
    new Gesture(
      window,
      {
        onDrag: (state) => { /* ... */ }
      },
      {}
    );
    

    Information:

    • Use Gesture version: v10.2.15

    Checklist:

    Reviewed by SteveoKr at 2022-06-21 14:09
  • 13. Exclude children from the gesture

    cc @odusseys

    Discussed in https://github.com/pmndrs/use-gesture/discussions/428

    Originally posted by odusseys January 19, 2022 Hi, Is there a way to exclude specific children of an element from triggering the gesture / getting events as they should ? For example, is there a way to correctly select text within a draggable elements ?

    Reviewed by dbismut at 2022-01-25 10:59
  • 14. filterTaps disables all click events in Jest

    Describe the bug

    the filterTaps option works great in all browser however in JEST it prevents child listeners from working.

    I am only guessing but maybe the following line doesn't work well as JEST is not able to get real size measurements: https://github.com/pmndrs/use-gesture/blob/9217f29802b8e4d87dab42e2cbd7313d2179ffea/packages/core/src/engines/DragEngine.ts#L210

    Sandbox or Video

    I prepared this CodeSandbox with unit tests.

    It contains Demo1 and Demo2:

    import { useDrag } from '@use-gesture/react'
    
    export const Demo1 = ({onClick}: {onClick: () => void}) => {
      const bind = useDrag(({ down, movement: [mx, my] }) => {
      }, {
    
      })
      return <div {...bind()}>
          <button onClick={onClick}>
          click me
          </button>
        </div>
    
    import { useDrag } from '@use-gesture/react'
    
    export const Demo2 = ({onClick}: {onClick: () => void}) => {
      const bind = useDrag(({ down, movement: [mx, my] }) => {
      }, {
        filterTaps: true
      })
      return <div {...bind()}>
          <button onClick={onClick}>
          click me
          </button>
        </div>
    }
    

    As you can see the only difference is filterTaps: true.

    The result is that the unit test which tries to click the button fails for Demo2:

    testResult

    Checklist:

    Reviewed by jantimon at 2022-01-06 17:18
  • 15. Improve pinch algorithm for wheel-based gestures

    Describe the bug

    When monitoring onPinch states, the values reported by state.delta[0] become greater and greater in magnitude on each successive event, and do not reset even when the gesture ends.

    My understanding of the documentation is that the delta simply represents the total change for one event (not one gesture).

    Sandbox or Video

    https://codesandbox.io/s/bold-beaver-w0opf?file=/src/App.js

    Keep pinching in one direction (in or out) -- eventually the delta gets very large or very small.

    Information:

    • React Use Gesture version: 10.1.6
    • Device: MacBook Air
    • OS: macOS Big Sur 11.6.2
    • Browser Chrome 96
    • Checklist:
    • [x] I've read the documentation.
    • [x] If this is an issue with drag, I've tried setting touch-action: none to the draggable element.
    Reviewed by CAYdenberg at 2021-11-29 22:11
  • 16. v10.3 improvements

    • [ ] Better tree shaking (don't include native handlers logic in hooks)
    • [ ] Make sure the eventOptions.capture option doesn't apply to non compatible handlers
    • [ ] Specific package for r3f to handle better typings
    Reviewed by dbismut at 2021-11-13 11:34
  • 17. TypeScript: useDrag & @react-three/fiber: Types of property 'onClick' are incompatible. MouseEventHandler vs ThreeEvent

    useDrag seems to work fine with @react-three/fiber components, but TypeScript complains about the handlers being attached by {...bind()}.

    e.g.

      const bind = useDrag<ThreeEvent<MouseEvent>>(() => {})
      return <mesh {...bind()} />
    
     Types of property 'onClick' are incompatible.
        Type 'MouseEventHandler<EventTarget> | undefined' is not assignable to type '((event: ThreeEvent<MouseEvent>) => void) | undefined'.
          Type 'MouseEventHandler<EventTarget>' is not assignable to type '(event: ThreeEvent<MouseEvent>) => void'.
            Types of parameters 'event' and 'event' are incompatible.
              Type 'MouseEvent & IntesectionEvent<MouseEvent>' is missing the following properties from type 'MouseEvent<EventTarget, MouseEvent>': isDefaultPrevented, isPropagationStopped, persist
    

    Sandbox

    https://codesandbox.io/s/fervent-blackburn-3p8db?file=/src/index.tsx

    Information:

    • React Use Gesture version: [e.g. v10.1.1]

    Checklist:

    Reviewed by timoxley at 2021-10-28 11:52
GradientLab is a gradient picker made with React, aiming to let you choose aesthetically pleasing gradients quickly and intuitively.
GradientLab is a gradient picker made with React, aiming to let you choose aesthetically pleasing gradients quickly and intuitively.

GradientLab is a gradient picker made with React, aiming to let you choose aesthetically pleasing gradients quickly and intuitively.

May 27, 2022
React project with Google Firebase API, create partys with admin view and user view. Users can ask topics to admin, and support other topics.

?? Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: React Firebase TypeScript ?? Como executar Clone o projeto e acesse a pasta

Aug 27, 2021
Keyborg is a library that tracks the state of current keyboard input on a web page through focus events.

Keyborg ⌨️ ?? Keyborg is a library that tracks the state of current keyboard input on a web page through focus events. It does not do anything invasiv

Apr 22, 2022
Save mouse positions and visit them using shortcut keys

Bookmark mouse position Save mouse positions using a shortcut key and quickly traverse to them using another shortcut key. bookmark-mouse-positions.1.

Dec 29, 2021
A React component that can virtualise lists and any set of children.

A list virtualiser that can create virtual rows out of arrays or a total count, or virtualise an arbitrary set of React components.

May 3, 2022
A React component to view a PDF document
A React component to view a PDF document

React PDF viewer A React component to view a PDF document. It's written in TypeScript, and powered by React hooks completely. // Core viewer import {

Jun 21, 2022
Jan 23, 2022
✨ View all of your GitHub stats and compare your stats with friends, made using nextjs and tailwind.

✨ View all of your GitHub stats and compare your stats with friends, made using nextjs and tailwind.

May 6, 2022
We have updated our application over to using hooks and functional components to replace any class components we had before.
We have updated our application over to using hooks and functional components to replace any class components we had before.

Crwn hooks We have updated our application over to using hooks and functional components to replace any class components we had before. How to fork an

Feb 10, 2022
🙏 Implement any design system in React

Honorable ?? Implement any design system in React Website Documentation Storybook Motivation Built with speed and developer experience in mind, Honora

Jun 9, 2022
React-fade: Proof of Concept react fade in/out that just works without any effort
React-fade: Proof of Concept react fade in/out that just works without any effort

react-fade Proof of Concept react fade in/out that just works without any effort. Inspired by react native layout animations. How it works FadeIn noth

May 17, 2022
A simple tool to view Facebook Messenger exported JSON files
A simple tool to view Facebook Messenger exported JSON files

Facebook Messenger exported JSON viewer What's this? This is a simple tool to view Facebook Messenger exported JSON files. I made the UI into a Messen

Jun 8, 2022
Description So you want to make a difference in the world. You definitely want to do more than just sign a petition
Description So you want to make a difference in the world. You definitely want to do more than just sign a petition

peticipate Description So you want to make a difference in the world. You definitely want to do more than just sign a petition. You have some awesome

Dec 7, 2021
React Query for Firestore, that you can actually use in production, on every screen.

React Query for Firestore, that you can actually use in production, on every screen.

Jun 3, 2022
Pimp my README is an open source profile builder that you can use to add some cool components to your README profile - Made with <3 by webapp.io :)
Pimp my README is an open source profile builder that you can use to add some cool components to your README profile - Made with <3 by webapp.io :)

Pimp my README This repository is the open-source project for Pimp my README. How this came to be So basically, GitHub added a feature where you can a

May 27, 2022
The history library lets you easily manage session history anywhere JavaScript runs.

history · The history library lets you easily manage session history anywhere JavaScript runs. A history object abstracts away the differences in vari

Jun 24, 2022
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation Using npm: $ npm install --save react-un

Jun 12, 2022
A React JS project to make age and gender prediction using Agify.io and Genderize.io. Only for practice use and just for fun~

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 29, 2022