A @chakra-ui component that allows you visually hide certain content based on device breakpoints

Hide.tsx

import { BoxProps, Box } from '@chakra-ui/core';

/**
 * @author: Stephane Mensah(GitHub: waptik, Twitter: _waptik)
 *
 * @description: A react component made with @chakra-ui to visually hide
 *               certain contents based on devices based on your theme's breakpoints.
 *                You can combine breakooints to hide at different breakpoint
 *               Idea originated from https://github.com/opencollective/opencollective-frontend/blob/master/components/Hide.js
 * @example: Hide on base breakpoint(< 640px)
 *          <Hide xs> You won't see me on most mobile devices such as an Galaxy S5 or any iPhone 😈 </Hide>
 *          Hide on small screens(640px >=)
 *          <Hide sm> You won't see me on a Galaxy Duo and alike 😈 </Hide>
 *          Hide on medium screens(768px >=)
 *          <Hide md> You won't see me on an iPad and alike 😈 </Hide>
 *          Hide on large screens(1024px >=)
 *          <Hide lg> You won't see me even if you are on an iPad Pro 😈 </Hide>
 *          Hide on big screens(1280px >=)
 *          <Hide xl> You won't see me on most big screens(laptop/desktop screen etc.)😈 </Hide>
 */

interface HideProps extends BoxProps {
  xs?: boolean
  sm?: boolean
  md?: boolean
  lg?: boolean
  xl?: boolean
}

const Hide = ({ xs, md, sm, lg, xl, ...props }: HideProps) => (
  <Box
    display={{
      base: xs ? 'none' : 'block',
      sm: sm ? 'none' : 'block',
      md: md ? 'none' : 'block',
      lg: lg ? 'none' : 'block',
      xl: xl ? 'none' : 'block',
    }}
    {...props}
  />
)

export default Hide;