Chakra UI Most Used Snippets
Costumized Toast Hooks
import { useToast, UseToastOptions } from '@chakra-ui/react'
// Customized reusable toast hooksexport 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> )}