samuelweckstrom / react-ascii-text Goto Github PK

export default function Banner() {
  const [paused, setPaused] = useState(false)

  useEffect(() => {
    setTimeout(() => {
      setPaused(true)
    }, 1000)
  }, [])

  const asciiTextRef = useAsciiText({
    animationCharacters: '▒ ░ █',
    font: ansiShadow,
    text: ['MY STRING', 'MT STRING'],
    fadeIn: true,
    animationDirection: 'down',
    isPaused: paused,
  })


  return (
    <div className='h-48'>
      <h1 className='text-z-red text-2xl'>
        <pre ref={asciiTextRef}></pre>
      </h1>
    </div>
  )
}

export default function Banner() {

  const asciiTextRef = useAsciiText({
    animationCharacters: '▒ ░ █',
    font: ansiShadow,
    text: ['MY STRING', 'MY STRING'],
    fadeIn: true,
    animationDirection: 'down',
  })

  return (
    <div className='h-48'>
      <h1 className='text-z-red text-2xl'>
        <pre ref={asciiTextRef}></pre>
      </h1>
    </div>
  )
}

export default function Banner() {
  const asciiTextRef = useAsciiText({
    animationCharacters: '▒ ░ █',
    font: ansiShadow,
    text: ['MY STRING', 'MY STRING'],
    fadeIn: true,
    animationDirection: 'down',
  })

  // Using a ref callback to bridge the type mismatch.
  const refCallback = (element: HTMLPreElement | null) => {
    if (asciiTextRef) {
      // Directly manipulate the `.current` property only if it's not `undefined`.
      asciiTextRef.current = element ?? undefined // Convert `null` to `undefined`.
    }
  }

  return (
    <div className='h-48'>
      <h1 className='text-z-red text-2xl'>
        <pre ref={refCallback}></pre>
      </h1>
    </div>
  )
}