Mario Brusarosco

shadcn ui

In the ground since Fri Oct 01 2021

Last watered inFri Oct 01 2021

Related Topics

SHADCN UI

Components

DropdownMenu

How was the effort to adapt SHADCN UI to a Custom Mobile Menu

  • We don't need to create the "toggle logic".
  • If we wanna to customize click behavior of a Dropdown item, we need to preventDefatul().
1<DropdownMenuItem
2  onClick={(e) => {
3    e.preventDefault();
4    console.log(1);
5  }}
6>
7  Profile
8</DropdownMenuItem>

  • If we wanna a high level of customization it's hard to AVOID using forwardRef.

  • Also import specific Types as

1interface someInterface extends ComponentPropsWithoutRef<"span"> {}
2
3export const CustomModal = forwardRef<HTMLSpanElement, CustomModalProps>(
4  ({ children, ...props }, ref) => {
5    return (
6      <span ref={ref} {...props}>
7        {children}
8      </span>
9    );
10  }
11);