Debounced bootstrap resize react PoC - Unstable

breakpoints.js

export const mediaBreakpointBetween = (sizeA, sizeB) => {
   const mediaBreakpoints = {
     xs: {
       name: 'xs',
       value: 0,
     },
     sm: {
       name: 'sm',
       value: 576,
     },
     md: {
       name: 'md',
       value:768
     },
     lg: {
       name: 'lg',
       value: 992,
     },
     xl: { 
       name: 'xl',
       value: 1200
     }
   }
    if (mediaBreakpoints[sizeA] === 'undefined' || mediaBreakpoints[sizeB] === 'undefined') {
      if (mediaBreakpoints[sizeA] === 'undefined') {
        console.log(`Wrong breakpoint ${sizeA} - its not specified`)
      }
      if (mediaBreakpoints[sizeB] === 'undefined') {
        console.log(`Wrong breakpoint ${sizeB} - its not specified`)
      }
      return
    }

    if (mediaBreakpoints[sizeA].value > mediaBreakpoints[sizeB].value) {
      console.log('Wrong breakpoints order, A is > than B')
      return
    }

    return window.matchMedia(`(min-width: ${[sizeA]}px) and (max-width: ${[sizeB] - 0.02}px)`).matches
  }

export const mediaBreakpointDown = (size) => {
   const mediaBreakpoints = {
     xs: {
       name: 'xs',
       value: 0,
     },
     sm: {
       name: 'sm',
       value: 576,
     },
     md: {
       name: 'md',
       value:768
     },
     lg: {
       name: 'lg',
       value: 992,
     },
     xl: { 
       name: 'xl',
       value: 1200
     }
   }
   const { xs, sm, md, lg, xl } = mediaBreakpoints
   const getCondition = () => {
     switch(size) {
       case xs.name:
       return `(max-width: ${sm.value - 0.02}px)`
       case sm.name:
         return `(max-width: ${md.value - 0.02}px)`
       case md.name:
         return `(max-width: ${lg.value - 0.02}px)`
       case lg.name:
         return `(max-width: ${xl.value - 0.02}px)`
       case xl.name:
         return ``
     }

    console.log(`Breakpoint "${size}" does not exists`);
    return
   }
   return window.matchMedia(getCondition()).matches
  }

export const mediaBreakpointUp = (size) => {
   const mediaBreakpoints = {
     xs: {
       name: 'xs',
       value: 0,
     },
     sm: {
       name: 'sm',
       value: 576,
     },
     md: {
       name: 'md',
       value:768
     },
     lg: {
       name: 'lg',
       value: 992,
     },
     xl: { 
       name: 'xl',
       value: 1200
     }
   }
   const { xs, sm, md, lg, xl } = mediaBreakpoints
   const getCondition = () => {
     switch(size) {
       case xs.name:
       return `(min-width: ${0}px)`
       case sm.name:
         return `(min-width: ${sm.value}px)`
       case lg.name:
         return `(max-width: ${lg.value}px)`
       case xl.name:
         return `(max-width: ${xl.value}px)`
     }

    return
   }
   return window.matchMedia(getCondition()).matches
  }

export const mediaBreakpointOnly = (size) => {
   const mediaBreakpoints = {
     xs: {
       name: 'xs',
       value: 0,
     },
     sm: {
       name: 'sm',
       value: 576,
     },
     md: {
       name: 'md',
       value:768
     },
     lg: {
       name: 'lg',
       value: 992,
     },
     xl: { 
       name: 'xl',
       value: 1200
     }
   }
   const { xs, sm, md, lg, xl } = mediaBreakpoints

   const getCondition = () => {
     switch(size) {
       case xs.name:
       return `(min-width: ${xs.value}) and (max-width: ${sm.value - 0.02}px)`
       case sm.name:
         return `(min-width: ${sm.value}) and (max-width: ${md.value - 0.02}px)`
       case md.name:
         return `(min-width: ${md.value}) and (max-width: ${lg.value - 0.02}px)`
       case lg.name:
         return `(min-width: ${lg.value}) and (max-width: ${xl.value - 0.02}px)`
       case xl.name:
         return `(min-width: ${xl.value}px)`
     }

     console.log('Wrong breakpoint size specified')
     return false
   }
 
   return window.matchMedia(getCondition()).matches
 }

export const mediaObject = () => {
  return ({
    mediaBreakpointOnly: {
      xs: mediaBreakpointOnly('xs'),
      sm: mediaBreakpointOnly('sm'),
      md: mediaBreakpointOnly('md'),
      lg: mediaBreakpointOnly('lg'),
      xl: mediaBreakpointOnly('xl')
    },
    mediaBreakpointDown: {
      xs: mediaBreakpointDown('xs'),
      sm: mediaBreakpointDown('sm'),
      md: mediaBreakpointDown('md'),
      lg: mediaBreakpointDown('lg'),
      xl: mediaBreakpointDown('xl')
    },
    mediaBreakpointUp: {
      xs: mediaBreakpointUp('xs'),
      sm: mediaBreakpointUp('sm'),
      md: mediaBreakpointUp('md'),
      lg: mediaBreakpointUp('lg'),
      xl: mediaBreakpointUp('xl')
    },
  })
}

component.js

//Usage
import { mediaObject } from './breakpoints'
import useDebouncedCallback from 'use-debounce/lib/callback'

const [bp, setBp] = useState(() => mediaObject())

// Debounce callback
const [debouncedCallback] = useDebouncedCallback(
  // function
  () => setBp(mediaObject()),
  // delay in ms
  50,
  // deps (in case your function has closure dependency like https://reactjs.org/docs/hooks-reference.html#usecallback)
  []
);
    
window.addEventListener('resize', () => setBp(mediaObject()))
  
return (
  <div>
    {bp.mediaBreakpointOnly && bp.mediaBreakpointOnly.xs && 
      <Header />
    }
  </div>
)