NumericInput

NumericInput.js

const [size, setSize] = useState(0);
const GB_SIZE_IN_BYTE = 1000000000;
const MB_SIZE_IN_BYTE = 1000000;

const Example = () => {
  const formaatedSize = useCallback(() => {
    switch (true) {
      case 0 <= size < GB_SIZE_IN_BYTE:
        return { type: 'MB', value: size / MB_SIZE_IN_BYTE };
      case size >= GB_SIZE_IN_BYTE:
        return { type: 'GB', value: size / GB_SIZE_IN_BYTE };
    }
  }, [size]);

  const formatedValue = formaatedSize().value;
  const formatedType = formaatedSize().type;
  return (
    <Numeric
      onChange={onchange}
      value={formatedValue}
      format={() => `${formatedValue} ${formatedType}`}
    />
  );
};