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