Dynamic props based on viewport

[diegogutierrez-dev]

I'm currently working on some parallax effects that change between viewports. For example:
Mobile:

• TranslateX

Desktop

• TranslateY

My approach is conditionally passing props based on the output of react-responsive:

const isMobileAndTablet = useMediaQuery({ query: '(max-width: 1023px)' });
const parallaxProps = !isMobileAndTablet
    ? { speed: 10, translateY: [20, -10] }
    : { speed: 10, translateX: [20, -10] };

const { ref: refParallax } = useParallax<HTMLDivElement>(parallaxProps);

But somehow, on mobile, I'm getting a mix of both translations.

Also getting this TS error 🤔

Argument of type '{ speed: number; translateY: number[]; translateX: number[]; }' is not assignable to parameter of type 'ParallaxProps'.
  Types of property 'translateX' are incompatible.
    Type 'number[]' is not assignable to type 'CSSEffect | undefined'.
      Type 'number[]' is not assignable to type 'EffectString'.
        Target requires 2 element(s) but source may have fewer