I need to use this directionLeft
in the javascript file. currently in is in the typescript file. I need to know how to pass these props in the JSX file. Please help me to do that.
import React from "react";
import { motion } from "framer-motion";
import image from "../public/img/me.jpg";
import Image from "next/image";
type props = {
directionLeft?: Boolean;
}
function Skill({directionLeft}: props) {
return (
<div className="group relative flex cursor-pointer">
<motion.div
initial={{
x: directionLeft ? -200 : 200,
opacity: 0,
}}
transition={{ duration: 1 }}
whileInView={{
opacity: 1,
x: 0,
}}
>
<Image
src={image}
className="rounded-full border"/>
</motion.div>
</div>
);
}
export default Skill;
You can use it simply in the JSX file:
import React from "react";
import { motion } from "framer-motion";
import image from "../public/img/me.jpg";
import Image from "next/image";
function Skill({directionLeft}) {
return (
<div className="group relative flex cursor-pointer">
<motion.div
initial={{
x: directionLeft ? -200 : 200,
opacity: 0,
}}
transition={{ duration: 1 }}
whileInView={{
opacity: 1,
x: 0,
}}
>
<Image
src={image}
className="rounded-full border"/>
</motion.div>
</div>
);
}
export default Skill;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.