Chakra UI Most Used Snippets

Costumized Toast Hooks

import { useToast, UseToastOptions } from '@chakra-ui/react'
// Customized reusable toast hooks
export const useAppToast = (options?: UseToastOptions) =>
useToast({
variant: 'top-accent',
position: 'bottom-right',
isClosable: true,
...options,
})

Check Desktop Width

import { useMediaQuery } from '@chakra-ui/react'
export const useDesktopWidthCheck = () => {
const [isDesktopWidth] = useMediaQuery('(min-width: 42rem)')
return isDesktopWidth
}

Chakra UI Reusable Popover LinkComponent

import Icon from '@chakra-ui/icon'
import {
Box,
Flex,
Link as ChakraLink,
Popover,
PopoverArrow,
PopoverBody,
PopoverCloseButton,
PopoverContent,
PopoverFooter,
PopoverHeader,
PopoverTrigger,
} from '@chakra-ui/react'
import React from 'react'
import { IconType } from 'react-icons'
import { FaExternalLinkAlt } from 'react-icons/fa'
type PopoverComponentProps = {
boxIcon: IconType
description: string
url: string
isSimple: boolean
}
const PopoverComponent = ({
boxIcon,
description,
url,
isSimple,
}: PopoverComponentProps) => {
return (
<>
<Popover placement="top" trigger="hover">
<PopoverTrigger>
<Box as="button">
<Icon
_hover={{
color: 'gray.500',
}}
as={boxIcon}
fontSize="4xl"
/>
</Box>
</PopoverTrigger>
<PopoverContent maxW={isSimple ? '10rem' : 'auto'}>
<PopoverArrow />
<PopoverCloseButton />
{isSimple && (
<PopoverHeader textAlign="center" fontWeight="semibold">
{description}
</PopoverHeader>
)}
{!isSimple && <PopoverBody>{description}</PopoverBody>}
{!isSimple && (
<PopoverFooter>
<ChakraLink textColor="blue.400" isExternal href={url}>
<Flex gridGap={2} align="center">
Go to the official docs site. <FaExternalLinkAlt />
</Flex>
</ChakraLink>
</PopoverFooter>
)}
</PopoverContent>
</Popover>
</>
)
}
export default PopoverComponent

Using Next.js Link with Chakra Link

import {Link as Chakra Link} from "@chakra-ui/react"
import NextLink from "next/link"
import { ReactNode } from "react";
type LinkProps = {
href: string;
children: ReactNode;
isExternal: boolean;
};
export const LinkComponent = ({href, children, isExternal}: LinkProps) => {
return (
<NextLink href={href} passHref>
<ChakraLink isExternal={isExternal}>{children}</ChakraLink>
</NextLink>
)
}