breakPoint-with-recoil

breakPoint.recoil.ts

import { nanoid } from "nanoid";
import { atom } from "recoil";
import UAParser from 'ua-parser-js'

interface BreakPoint{
  isMobile: boolean
  isLaptop: boolean
  isTablet: boolean
}


const getBreakPoints = () => {
  const parser = new UAParser()
  const deviceType = parser.getDevice().type
  const breakPoint: BreakPoint = {
    isLaptop: false,
    isMobile: false,
    isTablet: false,
  }

  if(deviceType === 'mobile'){
    breakPoint.isMobile = true
  }else if(deviceType === 'tablet'){
    breakPoint.isTablet = true
  }else{
    breakPoint.isLaptop = true
  }
  
  return breakPoint
}


export const breakPointState = atom<BreakPoint>({
  key: "breakPointState"+ nanoid(),
  default: getBreakPoints()
})

breakPoint.tsx

import React, { useEffect } from 'react'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import { breakPointState } from './Home.recoil'

export const BreakPoint = () => {
  const { isLaptop, isMobile, isTablet } = useRecoilValue(breakPointState)
  const setBreakPoint = useSetRecoilState(breakPointState)


  useEffect(() => {
    const watchBreakPoint = () => {
      const windowWidth =  window.innerWidth
      setBreakPoint({
        isLaptop: windowWidth >= 1024,
        isTablet: windowWidth>= 640 && windowWidth < 1024,
        isMobile: windowWidth < 640
      })
    }

    window.addEventListener('resize', watchBreakPoint)
    window.addEventListener('focus', watchBreakPoint)
    watchBreakPoint()

    return () => {
      window.removeEventListener('resize', watchBreakPoint)
    }
  }, [setBreakPoint])

  if (isLaptop) {
    return <>isLaptop</>
  } else if (isTablet) {
    return <>isTablet</>
  } else {
    return <>mobile</>
  }
}

dependencies

dependencies: 
react
nanoid
recoil
ua-parser-js