Property 'onClick' does not exist on Sheet.Backdrop

[pedrokohler]

Typescript is complaining that onClick property does not exist when I try to use with the Sheet.Backdrop component.

Here's the full error

Type '{ onClick: () => any; }' is not assignable to type 'IntrinsicAttributes & Pick<MotionProps, "style" | "transformTemplate" | "transformValues" | "variants" | "transition" | "onViewportBoxUpdate" | ... 39 more ... | "onAnimationComplete"> & RefAttributes<...>'.
  Property 'onClick' does not exist on type 'IntrinsicAttributes & Pick<MotionProps, "style" | "transformTemplate" | "transformValues" | "variants" | "transition" | "onViewportBoxUpdate" | ... 39 more ... | "onAnimationComplete"> & RefAttributes<...>'.ts(2322)

Here's the code snippet I'm using in my project

import React from 'react';
import Sheet from 'react-modal-sheet';

export function ShareEpisodeModal({ isOpen, setIsOpen }) {

  return (
    <>
      <Sheet isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <Sheet.Container>
          <Sheet.Header />
          <Sheet.Content>{/* Your sheet content goes here */}</Sheet.Content>
        </Sheet.Container>

        <Sheet.Backdrop onClick={() => setIsOpen(false)} />
      </Sheet>
    </>
  );
}

Maybe I'm just missing something here? I'd appreciate any help. Thanks

[Temzasse]

Hey there 👋🏻

Sheet.Backdrop is a motion.div or motion.button element (depending on whether you provide it the click/tap hander) which is why it exposes a bit different set of props than a regular div or button element. You can see the onTap handler details in the Framer Motion docs.

I hope this helps 🙂

[pedrokohler]

Hey there. I don't understand how that solves my problem. I used the onClick property and typescript is still complaining as if this property does not exist. From what I got from your explanation, this shouldn't happen. Shouldn't it behave like a motion.button then in this case? Why is typescript still complaining?

[Temzasse]

Sorry if I was unclear. You need to use onTap instead of onClick since Framer Motion components don't have onClick.