Here’s a demonstration of the live preview of a react code with the package framer-motion included:
import {useState} from "react"; import Test from "./Test"; import { AnimatePresence } from "framer-motion"; export default function MyPage(){ const [show, setShow] = useState(false); return <AnimatePresence> {show && <Test />} <button onClick={() => setShow(!show)}>Show</button> </AnimatePresence>; }
The above code is completely maintained on my notion blog. Here’s how it looks on my notion codeblock:
// special comment
// file: App.js
import {useState} from "react";
import Test from "./Test";
import { AnimatePresence } from "framer-motion";
export default function MyPage(){
const [show, setShow] = useState(false);
return <AnimatePresence>
{show && <Test />}
<button onClick={() => setShow(!show)}>Show</button>
</AnimatePresence>;
}
// file: Test.js
import { motion, AnimatePresence } from "framer-motion";
export default function TestComponent() {
return <motion.div layout initial={{opacity: 0, y: -20}} animate={{opacity: 1, y: 0}} exit={{opacity: 0, y: -20}}>Hello world</motion.div>;
}
Do you see the pattern? It’s actually really simple. I detect if the code is for live preview by a simple logic.
Look closely on that “special comment” comment on the top of the codeblock. If the codeblock starts with // editor then we render the live preview with sandpack. If not we just render the codeblock.
Quite interesting, right?