Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Compatibility with react-pose

See original GitHub issue

I’m running into an issue with refs while trying to use a react-pose component in Playroom. I’ve create a reproduction repo here: https://github.com/puregarlic/playroom-pose-compat

Am I missing something? I’m not really sure why it works in a normal environment but not in Playroom.

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:6 (1 by maintainers)

Top GitHub Comments

1reaction

markdalgleishcommented, Apr 8, 2019

Should be fixed in v0.9.0.

1reaction

bradbarrowcommented, Jan 31, 2019

Facing the same challenge.

The point of difference I’ve narrowed down to is that outside of playroom, the ref here IS an instanceof Element.

and inside Playroom it is NOT an instanceof Element.

https://github.com/Popmotion/popmotion/blob/master/packages/react-pose/src/components/PoseElement/index.tsx#L169

https://github.com/Popmotion/popmotion/blob/master/packages/react-pose/src/components/PoseElement/index.tsx#L188

A potentially helpful debug log:

You can see that ref is indeed an HTMLDivElement but apparently that doesn’t make it an instance of Element in this case.

Also, on a single visit to playroom…the ref get’s overridden to null:

And lastly a debug log from outside of Playroom:

I wonder if the scope-eval step in Playroom is mucking about with the refs?

I’ll try to keep digging on this tomorrow

Top Results From Across the Web

react-pose - npm

A declarative animation library for React. Latest version: 4.0.10, last published: 3 years ago. Start using react-pose in your project by ...

Supported values | Pose - Popmotion

Any value that contains a number or color, or multiple numbers and colors, is animatable. Pose doesn't need specific support for a value...

react-pose | Yarn - Package Manager

A declarative animation library for React. animation, dom, declarative, popmotion ... Notice: React Pose has been deprecated in favour of Framer Motion.

Animate your React App with Pose - Benevolent Bytes Blog

Pose makes animations in React easy. Why not give it a go and breath some life into your app today.

React Pose for easy and amazing animations | Developer

Pose works by detecting changes in the state. If a component is declared outside the render or return blocks, it won't be re-rendered...