Aora Bot
  • English

      • ActivityTicker

      Crossfading single line of text.

      Searching the web
      import { useEffect, useState } from 'react';
import { ActivityTicker } from '@aora-bot/react';

const lines = ['Searching the web', 'Reading results', 'Writing a summary', 'Done'];

export default function Demo() {
  const [i, setI] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setI((n) => (n + 1) % lines.length), 1600);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="site-demo site-demo--center">
      <ActivityTicker text={lines[i]} />
    </div>
  );
}

      Why not just swap the text

      Both the outgoing and incoming lines are in the DOM during the transition, stacked in the same grid cell. The row is therefore always as tall as the taller of the two, and as wide as it needs to be, throughout the fade.

      Replacing the text in place instead makes a list of activity rows jitter every few seconds as the words change length — a small thing that is very visible when several rows are animating at once.

      API

      PropTypeDefaultDescription
      text*string—Current line. Changing it slides the old line out and the new one in.
      classNamestring——
      durationMsnumber220Transition duration in milliseconds.
      styleCSSProperties—Merged over the duration custom property the transition reads.

      Next