Hide text before resize finishes

[GROOVIZ]

Is it possible to hide the text before the resize finishes, in order to prevent the flickering effect? What would you recommend?

Steps to reproduce:

1. Go to https://saltycrane.github.io/use-fit-text/
2. Refresh the page

[masonlee]

I am starting with the text transparent and then using the useFitText({onFinish}) callback to make it opaque after resizing completes. It's a bit of a pain to do this everywhere manually, but it works.

[bmovement]

I am starting with the text transparent and then using the useFitText({onFinish}) callback to make it opaque after resizing completes. It's a bit of a pain to do this everywhere manually, but it works.

Thanks for the idea @masonlee... I'm using this custom hook:

export const useFitTextFinished = (options) => {
  const [finished, setFinished] = useState(false);
  const { ref, fontSize } = useFitText({
    ...options,
    onFinish: () => setFinished(true),
  });
  return { ref, fontSize, finished };
};

Edit:

Ok, now I'm getting wacky with it... considering this method so I don't have to explicitly handle hiding outside of the hook:

export const useFitTextFinished = ({ color: finishedColor, ...options }) => {
  const [color, setColor] = useState("transparent");
  const { ref, fontSize } = useFitText({
    ...options,
    onFinish: () => setColor(finishedColor),
  });
  return { ref, fontSize, color };
};

[choyongjoon]

I made this custom hook. It uses undefined color to use the original color.

import { useState } from 'react';
import useFitText, { TOptions } from 'use-fit-text';

const useBetterFitText = (options?: TOptions) => {
  const [color, setColor] = useState<'transparent' | undefined>('transparent');
  const { ref, fontSize } = useFitText({
    ...options,
    onFinish: (finishedFontSize: number) => {
      setColor(undefined);
      if (options?.onFinish) options?.onFinish(finishedFontSize);
    },
  });
  return { ref, fontSize, color };
};

export default useBetterFitText;