useRem

useRem

import { useState } from 'react';
import { getRemNumber } from '@/utils/doms';
import { useEventListener } from 'ahooks/es';
import * as _ from 'lodash';

export function getRemNumber(): number {
  const fontString = getComputedStyle(document.documentElement).getPropertyValue('font-size');
  return Number(fontString.replace(/[^0-9.]/g, ''));
}
export function transformPxToRemString(length: number, precision = 3) {
  return `${_.round(length / getRemNumber(), precision)}rem`;
}

function useRem(): number {
  const [remNumber, setRemNumber] = useState(() => getRemNumber());
  useEventListener(
    'resize',
    () => {
      setRemNumber(getRemNumber());
    },
    {
      target: window,
    }
  );
  return remNumber;
}

export default useRem;