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>
  )
}