Useful Chakra UI Components

README.md

Useful Chakra UI Components

Last tested Chakra version: 1.6.2

List of components

• BoxColorMode
• BoxFile
• BoxMotion
• BoxOverlay
• BoxOverlaySpinner
• Col
• Row
• ContainerScreen
• TextMini
• BoxScrollMini
• GroupHover - (Required add transition prop to work properly)
  • SlideDownGroupHover
  • SlideLeftGroupHover
  • SlideRightGroupHover
  • SlideUpGroupHover

BoxColorMode.tsx

import React from 'react'
import { Box, BoxProps, useColorModeValue } from '@chakra-ui/react'

export interface BoxColorModeProps extends BoxProps {
  dark?: BoxProps
  light?: BoxProps
}

const BoxColorMode: React.FC<BoxColorModeProps> = ({
  dark,
  light,
  children,
  ...rest
}) => {
  const props = useColorModeValue(light, dark)

  return (
    <Box {...rest} {...props}>
      {children}
    </Box>
  )
}

export default BoxColorMode

BoxFile.tsx

import React, { useRef } from 'react'
import { Box, BoxProps, Input, InputProps } from '@chakra-ui/react'

export interface BoxFileProps extends BoxProps {
  input?: InputProps
}

const BoxFile: React.FC<BoxFileProps> = ({ input, children, ...rest }) => {
  const inputRef = useRef<HTMLInputElement>(null)

  return (
    <Box
      pos="relative"
      onClick={() => {
        inputRef.current?.click()
      }}
      {...rest}
    >
      <Input
        type="file"
        left={0}
        top={0}
        pos="absolute"
        w="0"
        h="0"
        userSelect="none"
        cursor="pointer"
        ref={inputRef}
        opacity={0}
        overflow="hidden"
        {...input}
      />
      <Box {...rest}>{children}</Box>
    </Box>
  )
}

export default BoxFile

BoxMotion.tsx

import React, { forwardRef } from 'react'
import { ChakraProps, chakra, ComponentWithAs } from '@chakra-ui/react'
import { MotionProps, motion } from 'framer-motion'

export type BoxMotionProps = Omit<ChakraProps, keyof MotionProps> &
  MotionProps & {
    as?: React.ElementType
  }

export const BoxMotion = motion(
  forwardRef<ChakraProps, 'div'>((props, ref) => {
    return <chakra.div ref={ref as any} {...props} />
  })
) as ComponentWithAs<'div', BoxMotionProps>

BoxOverlay.tsx

import { Box, BoxProps } from '@chakra-ui/react'
import React from 'react'

const BoxOverlay: React.FC<BoxProps> = (props) => {
  return (
    <Box
      d="flex"
      flexDir="row"
      pos="absolute"
      w="100%"
      h="100%"
      zIndex={10}
      left={0}
      top={0}
      {...props}
    />
  )
}

export default BoxOverlay

BoxOverlaySpinner.tsx

import { BoxProps, Spinner } from '@chakra-ui/react'
import React from 'react'
import BoxOverlay from './BoxOverlay'

const BoxOverlaySpinner: React.FC<BoxProps> = (props) => {
  return (
    <BoxOverlay
      alignItems="center"
      justifyContent="center"
      d="flex"
      rounded="sm"
      {...props}
    >
      <Spinner color="primary.500" size="lg" />
    </BoxOverlay>
  )
}

export default BoxOverlaySpinner

BoxScrollMini.tsx

import { BoxProps, useToken } from '@chakra-ui/react'
import React from 'react'
import Col from './Col'

const BoxScrollMini: React.FC<BoxProps> = ({ color = 'gray.900', ...rest }) => {
  const scrollColor = useToken('colors', color as string)
  const scrollColorHover = useToken('colors', color as string)
  const scrollPadding = '25px'

  const scrollGradient = (color: string) =>
    `linear-gradient(to bottom, transparent ${scrollPadding}, ${color} ${scrollPadding}, ${color} calc(100% - ${scrollPadding}), transparent ${scrollPadding})`

  return (
    <Col
      overflowY="auto"
      sx={{
        '&::-webkit-scrollbar': {
          width: 1,
          bg: 'transparent'
        },
        '&::-webkit-scrollbar-track': {
          width: 1,
          bg: 'transparent'
        },
        '&::-webkit-scrollbar-thumb': {
          background: scrollGradient(scrollColor),
          rounded: 'sm'
        },
        '&:hover': {
          '&::-webkit-scrollbar-thumb': {
            background: scrollGradient(scrollColorHover)
          }
        }
      }}
      {...rest}
    />
  )
}

export default BoxScrollMini

Col.tsx

import { Box, BoxProps } from '@chakra-ui/react'
import React from 'react'

const Col: React.FC<BoxProps> = (props) => {
  return <Box d="flex" flexDir="column" {...props} />
}

export default Col

ContainerScreen.tsx

import { Box, BoxProps } from '@chakra-ui/layout'
import React from 'react'

const ContainerScreen: React.FC<BoxProps> = (props) => {
  return <Box width="100vw" height="100vh" overflow="hidden" {...props} />
}

export default ContainerScreen

Row.tsx

import { Box, BoxProps } from '@chakra-ui/react'
import React from 'react'

const Row: React.FC<BoxProps> = (props) => {
  return <Box d="flex" flexDir="row" {...props} />
}

export default Row

SlideDownGroupHover.tsx

import { Box, BoxProps } from '@chakra-ui/layout'
import React from 'react'

const SlideDownGroupHover: React.FC<BoxProps> = (props) => {
  return (
    <Box
      opacity={0}
      transform="translateY(10px)"
      _groupHover={{ opacity: 1, transform: 'translateY(0px)' }}
      {...props}
    />
  )
}

export default SlideDownGroupHover

SlideLeftGroupHover.tsx

import { Box, BoxProps } from '@chakra-ui/layout'
import React from 'react'

const SlideLeftGroupHover: React.FC<BoxProps> = (props) => {
  return (
    <Box
      opacity={0}
      transform="translateX(10px)"
      _groupHover={{ opacity: 1, transform: 'translateX(0px)' }}
      {...props}
    />
  )
}

export default SlideLeftGroupHover

SlideRightGroupHover.tsx

import { Box, BoxProps } from '@chakra-ui/layout'
import React from 'react'

const SlideRightGroupHover: React.FC<BoxProps> = (props) => {
  return (
    <Box
      opacity={0}
      transform="translateX(-10px)"
      _groupHover={{ opacity: 1, transform: 'translateX(0px)' }}
      {...props}
    />
  )
}

export default SlideRightGroupHover

SlideUpGroupHover.tsx

import { Box, BoxProps } from '@chakra-ui/layout'
import React from 'react'

const SlideUpGroupHover: React.FC<BoxProps> = (props) => {
  return (
    <Box
      opacity={0}
      transform="translateY(-10px)"
      _groupHover={{ opacity: 1, transform: 'translateY(0px)' }}
      {...props}
    />
  )
}

export default SlideUpGroupHover

TextMini.tsx

import { Text, TextProps } from '@chakra-ui/layout'
import React from 'react'

const TextMini: React.FC<TextProps> = ({ children, ...props }) => {
  return (
    <Text fontWeight="bold" textTransform="uppercase" fontSize="xs" {...props}>
      {children}
    </Text>
  )
}

export default TextMini