Search code examples
reactjsstorybookreact-spring

React-use-gesture not working with Storybook


I have my component and the storybook stories file, it renders with no errors but it is not draggable. I am basing my studies into this example from the react-use-gesture Github. I noticed that if I start a new project with create-react-app and paste this code there it works fine, but using storybook it doesn't work. I also notice that in my code the element looks like <div style="x: 0px; y: 0px;"></div> instead of <div style="transform: none;"></div> (code from the example that works), I've been researching and I couldn't find a solution so I came to ask the help of this awesome community.

Goal: To have a draggable card component story on react storybook, using react-spring and react-use-gesture.

Expected results: To be able to drag the component around.

Actual results: Component is not draggable

Error Messages: none.

Component's code:

import React from 'react'
import { useSpring, animated } from 'react-spring'
import { useDrag } from 'react-use-gesture'

export function Card() {
  const [props,
    set] = useSpring(() => ({ x: 0, y: 0, scale: 1 }))
  const bind = useDrag(({ down, movement: [x, y] }) => {
    set({ x: down ? x : 0, y: down ? y : 0, scale: down ? 1.2 : 1 })
  })
  return <animated.div {...bind()} style={props} />
}

export default Card;

Stories code:

import React from 'react'
import { storiesOf } from '@storybook/react'
import Card from './Card'

import './card.css'

const Body = ({ children }: any) => (
  <div className="wrapper">
    <style
      dangerouslySetInnerHTML={{ __html: `body { margin: 0; }` }}
    />
    {children}
  </div>
)

storiesOf('UI Components | Card', module)
  .add("Simple Card", () => (
    <Body>
      <Card />
    </Body>
  ))

You can check my github repo for this and run npm install and npm run storybook Here is the folder that contains the code above ^ if you want to check the code only.


Solution

  • I found the solution, the codesandbox is using the latest beta of useSpring. The versions I had were:

        "react-spring": "^8.0.27",
        "react-use-gesture": "^6.0.14",
    

    and the solution

        "react-spring": "9.0.0-beta.34",
        "react-use-gesture": "latest"
    

    Maybe this will be of help for someone else as well.