Skip to content

Commit

Permalink
fix(): Add forwardRef to shadcn components. (#43)
Browse files Browse the repository at this point in the history
  • Loading branch information
aidanCQ authored Jan 16, 2025
1 parent a8fb014 commit a9063db
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 16 deletions.
8 changes: 4 additions & 4 deletions src/custom/theme-selector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const useTheme = () => {
return { theme, setMode: (_mode: typeof theme['mode']) => setTheme(_mode) }
}

export const ThemeSelector = ({theme, setMode}: ReturnType<typeof useTheme>) => {
export const ThemeSelector = React.forwardRef<HTMLButtonElement, ReturnType<typeof useTheme>>(({theme, setMode}, ref) => {

const stateMap = {
"light": {
Expand All @@ -31,9 +31,9 @@ export const ThemeSelector = ({theme, setMode}: ReturnType<typeof useTheme>) =>
if (theme.mode === "dark") setMode('light')
if (theme.mode === "light") setMode("system")
if (theme.mode === "system") setMode("dark")
}}>
}} ref={ref}>
{stateMap[theme.mode].icon}
</Button>
)
};

})
6 changes: 3 additions & 3 deletions src/shadcn/ui/badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
const Badge = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & BadgeProps>(({ className, variant, ...props }, ref ) => {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
<div className={cn(badgeVariants({ variant }), className)} {...props} ref={ref}/>
)
}
})

export { Badge, badgeVariants }
14 changes: 5 additions & 9 deletions src/shadcn/ui/skeleton.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
import React from "react"
import { cn } from "src/utils"

function Skeleton({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
const Skeleton = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({className, ...props}, ref) => {
return <div
className={cn("animate-pulse rounded-md bg-primary/10", className)}
aria-busy="true"
role="progressbar"
aria-valuemin={0}
aria-valuemax={100}
aria-valuetext="Please wait..."
{...props}
ref={ref}
/>
)
}

})
export { Skeleton }

0 comments on commit a9063db

Please sign in to comment.