Creating interactive, dynamic, and responsive user interfaces is a fundamental part of front-end development. In the realm of mobile web applications, a pattern that frequently makes an appearance is the bottom sheet component — a UI element that glides up from the bottom of the screen to unveil more content or interactions. In this article, we walk you through the process of building a customizable, stateful bottom sheet component using React, with a special focus on the powerful animation library, “Framer Motion.” Before we start, the full source code for this tutorial is available on , and the published package can be found on . Feel free to use it in your applications and tailor it to your needs. You can also check out a live demo . GitHub npm here Harnessing the Power of Framer Motion is a popular open-source library that brings your applications to life with smooth, natural animations. Its API is designed to be simple and intuitive while offering a rich set of features for animations and interactions. Let’s look at some common use cases for Framer Motion. Framer Motion React Simple Animations Animating a component in Framer Motion is as simple as swapping out the usual HTML or React tag with a prefixed tag. For example, to animate a you would use . motion div motion.div Framer Motion components can then be animated using the prop, which accepts an object with CSS properties and values. For example, you can fade in an element by changing its opacity: animate <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} > Hello, world! </motion.div> In this example, the component will start with an opacity of and animate to an opacity of , creating a fade-in effect. motion.div 0 1 Variants for Complex Animations For more complex animations, Framer Motion offers . Variants allow you to predefine a set of animation states and switch between them. This comes in handy when creating animations that have multiple stages or need to be reused across multiple components. variants const variants = { hidden: { opacity: 0 }, visible: { opacity: 1 }, } <motion.div variants={variants} initial="hidden" animate="visible" > Hello, world! </motion.div> In this example, the starts in the "hidden" state (with an opacity of ) and animates to the "visible" state (with an opacity of ). motion.div 0 1 Gestures and Interactions Framer Motion also offers a robust set of controls for handling gestures like drag, tap, hover, and pinch. These can be enabled with simple props and come with built-in animations. <motion.div drag="x" dragConstraints={{ left: 0, right: 0 }} > I'm a draggable element! </motion.div> These are just a few of the many ways you can use Framer Motion to add animations and enhance interactivity in your React applications. It offers a great balance between simplicity of use and depth of capability, making it a versatile choice for any developer’s toolkit. You can find out more examples on the Framer Motion . official site Leveraging Framer Motion in Our Bottom Sheet Component In our Bottom Sheet Component, we made use of two primary elements from the Framer Motion library — the component and the hook. motion useMotionValue Framer Motion Component We used the component to provide the animated behavior of the bottom sheet. Instead of the usual tag, we used for the wrapping component of our Bottom Sheet. motion div motion.div return ( <motion.div drag="y" className={cx(s.root, rootClassName)} style={{ height: height, y }} dragConstraints={{ top: 0, bottom: 0 }} onDragEnd={handleDragEnd} ref={componentRef} > ... </motion.div> ); Here, we’ve used several properties of the component: motion : This enables dragging of the element along the y-axis. drag="y" : This applies the animated values of height and y position to the style of the component. style={{ height: height, y }} : This restricts the drag motion within the given constraints. In this case, the Bottom Sheet can't be dragged outside of its container. dragConstraints={{ top: 0, bottom: 0 }} : This is a callback that is executed when the drag event ends. We're using this to decide whether to open or close the Bottom Sheet based on the drag direction. onDragEnd={handleDragEnd} Framer Motion Hook The hook from Framer Motion provides a way to create a motion value that can be used in animations. In our Bottom Sheet Component, we've used to control the position of our bottom sheet. useMotionValue useMotionValue y const y = useMotionValue(0); When the Bottom Sheet is dragged, the value of changes dynamically, and the component re-renders, giving us a smooth dragging animation. y The Drag End Handler We’ve also created a handler function for the event that uses the information about the drag event (provided by Framer Motion) to decide whether to open or close the Bottom Sheeta and sets the height of the BottomSheet based on the direction of the drag. onDragEnd const handleDragEnd = ( _: MouseEvent | TouchEvent | PointerEvent, info: PanInfo ) => { setHeight(info.offset.y < 0 ? fullHeight : compactHeight); setOpen(info.offset.y < 0); }; Here, gives us the total distance dragged in pixels. If the value is negative, it means the Bottom Sheet has been dragged upwards, and hence we set the height to and set to . Conversely, if the Bottom Sheet is dragged downwards, will be positive, and we set the height to and to . info.offset.y fullHeight isOpen true info.offset.y compactHeight isOpen false In summary, the combination of Framer Motion’s component and hook provided us with a straightforward and intuitive way to animate our Bottom Sheet Component and make it interactive. motion useMotionValue Embarking on the Customizable Bottom Sheet Component Journey Our adventure into the construction of a stateful Bottom Sheet component begins with the acceptance of an array of props that give us the freedom to personalize its behavior and appearance. It kick-starts by initializing the required state variables and arranging a ref to manage clicks external to the component: export const BottomSheet: React.FC<BottomSheetProps> = ({ children, rootClassName, wrapperClassName, lineClassName, contentClassName, compactHeight = "auto", fullHeight = "90vh", onClickOutside, closeOnClickOutside = true }) => { const componentRef = useRef<HTMLDivElement | null>(null); const [height, setHeight] = useState<string>(compactHeight); const [isOpen, setOpen] = useState<boolean>(false); const y = useMotionValue(0); ... }; Next, we step into the world of hooks, which checks if the bottom sheet is open and sets the height correspondingly: useEffect useEffect(() => { if (!isOpen) setHeight(compactHeight); }, [isOpen, setHeight, compactHeight]); Taking advantage of the hook, it takes an array of refs and a function as parameters. The function is called whenever a click is detected outside the elements referred to by the refs. In our case, we pass the and a function that checks if is true. If so, the bottom sheet is closed when a click outside is detected. useClickOutside componentRef closeOnClickOutside useClickOutside([componentRef], () => { onClickOutside?.(); if (closeOnClickOutside) { setOpen(false); } }); For a detailed overview, the complete code of the hook looks like this: useClickOutside import React, { useEffect } from "react"; export function useClickOutside<T extends HTMLElement>( refs: React.MutableRefObject<T | null>[], callback: (event: MouseEvent) => void, ): void { const handleClick = (e: MouseEvent): void => { if (!refs.some((ref) => ref.current && ref.current.contains(e.target as Node))) { return callback(e); } }; useEffect(() => { document.addEventListener("click", handleClick, true); return () => { document.removeEventListener("click", handleClick, true); }; }); } Finally, we return the JSX for our BottomSheet, leveraging the component from to incorporate the drag functionality. motion framer-motion return ( <motion.div drag="y" className={cx(s.root, rootClassName)} style={{ height: height, y }} dragConstraints={{ top: 0, bottom: 0 }} onDragEnd={handleDragEnd} ref={componentRef} > <div className={cx(s.wrapper, wrapperClassName)}> <div className={s.line}> <div className={cx(s.innerLine, lineClassName)}></div> </div> <div className={cx(s.content, contentClassName)}>{Children}</div> </div> </motion.div> ); With this, our journey of building a stateful Bottom Sheet component in React comes to an end. As seen, the animation capabilities of Framer Motion were integral to providing the dynamic, responsive, and smooth UI that characterizes a Bottom Sheet component. As developers, it’s our job to craft interactive, engaging, and user-friendly interfaces, and tools like Framer Motion make this task much more enjoyable and efficient. Happy coding!
