handle resize on useTransition

[LoiKos]

hi guys !

I'm working on a component with a full screen mode. So i have built this little transition to handle the switch between the component default and fullscreen mode.
But i have a problem on resize. For example if i have devtools open and i pass to fullscreen, when i remove devtools the component will stay to the same size as devtools open. I check windowsDimensions and it get update correctly but transitions doesn't change.

How can i handle resize using useTransition ?

 let containerRef = React.useRef<HTMLDivElement>(null)
 let windowsDimensions = useWindowDimensions()
 let boundingRect = containerRef.current?.getBoundingClientRect()

const transitions = useTransition(isFullScreen, {
    from: {
      top: boundingRect?.top ?? 0,
      left: boundingRect?.left ?? 0,
      width: boundingRect?.width ?? windowsDimensions.width,
      height: boundingRect?.height ?? windowsDimensions.height,
      zIndex: 10000,
    },
    enter: {
      top: 0,
      left: 0,
      width: windowsDimensions.width,
      height: windowsDimensions.height,
      zIndex: 10000,
    },
    leave: {
      top: boundingRect?.top ?? 0,
      left: boundingRect?.left ?? 0,
      width: boundingRect?.width ?? windowsDimensions?.width,
      height: boundingRect?.height ?? windowsDimensions?.height,
      zIndex: 10000,
    },
  })

return  (<Relative
      ref={containerRef}
      style={{ minHeight: 400 }}
    > {ReactDOM.createPortal(
        transitions(
          (styles, item) =>
            item && (
              <animated.div
                style={{
                  ...styles,
                  position: 'absolute',
                }}
              >
              {...content goes here}
              </animated.div>
            )
        ),
        document.body
      )}
    </Relative>)

[joshuaellis]

Without seeing what you're trying to achieve (e.g. through a codesandbox) it's a bit hard to advise you well, are you able to share one?

My initial thoughts are you're not getting the data you're expecting by trying to do something like access the ref in the render method or maybe theres an issue with Portal where actually you need to use an arbitrary div to ensure something is always mounted (this is required if you use a library like Radix):

ReactDOM.createPortal(
  <div>
    {transitions(
      (styles, item) =>
        item && (
          <animated.div
            style={{
              ...styles,
              position: 'absolute',
            }}
          ></animated.div>
        )
    )}
  </div>,
  document.body
)

[LoiKos]

hum.. display:none is used only to hide CardComponent that is not render by transitions. I try to build this just using a transition but that doesn't work as intended so i keep a CardComponent mounted outside. I probably miss something here too.

But i just recorded an example of what i'm trying to fix :
https://user-images.githubusercontent.com/9548473/174767200-87bff4a2-594b-40ae-861d-aea090bee9f5.mov

[joshuaellis]

Okay, useTransition is about unmounting / mounting items, so realistically if you want things to animate to sizes e.g. the window size you want to be using the useSpring hook. That way you update the spring as the window sizes change. useTransition only updates when your item changes.

[LoiKos]

Ok thank you for your answers :). One last thing, if i understand correctly how to use useSpring, i should build the animation and then with onRest settings reverse to handle the backward animation ?

[joshuaellis]

I personally would do something like this:

const [style, api] = useSpring(() => ({
  //...options
}),[])

const onFullSizeClick = () => {
  if(isOpen){
    api.start({
      to: {
        // ...small style  
      }
    })
  }

  else {
    api.start({
      to:  {
        // ...large style
      }
    })
  }
}

Simply because you have more control over when the animations take place. But if you don't feel confident enough to use the imperative API then yes, i believe reverse should suffice.

You're welcome for the answers, consider contributing (or convincing your company) to contribute to react-spring – https://opencollective.com/react-spring 👍🏼

[LoiKos]

Doesn't think about that thanks ! :) 👍