Typescript props covert to javascript props

Question

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 still call it the same way from a javascript file, ``. If you want prop type checking in the javascript file, you'll need to also declare `propTypes` like you used to do pre-typescript. — Tom, Nov 15 '22 at 16:04
Because I need to use this code in javascript not typescript — Nuwan Chamikara, Nov 15 '22 at 16:28

score 0 · Answer 1 · answered Nov 15 '22 at 16:07

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;

You don't need to declare that type in the JSX file. Then, why are you going to do that? — talent-jsdev, Nov 15 '22 at 16:42

Typescript props covert to javascript props

1 Answers1