javascript - How can you use a React hook conditionally in a function component - Stack Overflow

I have a react function component that needs to use a framer motion hook to build up the props of an object called styles, however you can't use hooks conditionally, so I'd like to know how to use hooks conditionally?

let styles = {};
if (scaleUp) {
  styles.scale = useTransform(scrollYProgress, [0, 1], [1, 1.2]);    
}
if (scaleDown) {
  styles.scale = useTransform(scrollYProgress, [0, 1], [1.2, 1]);    
}  
if (fadeIn) {
  styles.opacity = useTransform(scrollYProgress, [0, 1], [0, 1]);
}
if (fadeOut) {
  styles.opacity = useTransform(scrollYProgress, [0, 1], [1, 0]);
}

I have a react function component that needs to use a framer motion hook to build up the props of an object called styles, however you can't use hooks conditionally, so I'd like to know how to use hooks conditionally?

let styles = {};
if (scaleUp) {
  styles.scale = useTransform(scrollYProgress, [0, 1], [1, 1.2]);    
}
if (scaleDown) {
  styles.scale = useTransform(scrollYProgress, [0, 1], [1.2, 1]);    
}  
if (fadeIn) {
  styles.opacity = useTransform(scrollYProgress, [0, 1], [0, 1]);
}
if (fadeOut) {
  styles.opacity = useTransform(scrollYProgress, [0, 1], [1, 0]);
}

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Jan 4 at 22:11 Drew Reese 205k1818 gold badges247247 silver badges274274 bronze badges asked Jan 4 at 22:04 jonjon 1,59122 gold badges2929 silver badges4545 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

You can't conditionally call React hooks, you'll just need to unconditionally call each hook and apply the appropriate return values.

Example:

const scaleUp = useTransform(scrollYProgress, [0, 1], [1, 1.2]);
const scaleDown = useTransform(scrollYProgress, [0, 1], [1.2, 1]);
const fadeIn = useTransform(scrollYProgress, [0, 1], [0, 1]);
const fadeOut = useTransform(scrollYProgress, [0, 1], [1, 0]);

const styles = {};

if (effects.scaleUp) {
  styles.scale = scaleUp;    
}
if (effects.scaleDown) {
  styles.scale = scaleDown;    
}  
if (effects.fadeIn) {
  styles.opacity = fadeIn;
}
if (effects.fadeOut) {
  styles.opacity = fadeOut;
}