-
Notifications
You must be signed in to change notification settings - Fork 156
Dynamic props based on viewport #185
Unanswered
diegogutierrez-dev
asked this question in
Q&A
-
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
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment