Как реализовать эффект печатающегося текста?

Question

[flexpc]

Хочу сделать эффект печатающегося текста и смены слов, как на этом сайте.
В интернете куча примеров для js, но не одного для react.

Comments

[WbICHA]

в интернете куча примеров для js, но не одного для react

Я что-то пропустил? Реакт на каком-то другом языке написан?

Answer 1

[0xD34F]

Состояние компонента должно содержать три значения - индекс печатаемой строки, количество отображаемых символов, направление печати (печатаем или стираем, т.е., в какую сторону надо изменять количество отображаемых символов, увеличивать или уменьшать). Дальше понятно что - setInterval или рекурсивный setTimeout, изменяем количество отображаемых символов, если дошли до конца строки - меняем направление, дошли до начала - меняем направление и индекс строки. Вот как-то так:

const defaults = {
  index: 0,
  length: 0,
  step: 1,
};

function Typewriter({ strings, delay }) {
  const [ state, setState ] = useState(null);

  useEffect(() => {
    setState(() => ({...defaults}));
  }, [ strings ]);

  useEffect(() => {
    const timeoutId = setTimeout(setState, delay, ({...state}) => {
      state.length += state.step;
      if (state.length === strings[state.index].length) {
        state.step = -1;
      } else if (state.length === 0) {
        state.step = 1;
        state.index = (state.index + 1) % strings.length;
      }
      return state;
    });

    return () => clearTimeout(timeoutId);
  });

  return <div>{strings?.[state?.index]?.slice(0, state?.length)}</div>;
}

Comments

[szQocks]

Искал в коде к чему можно прикопаться, но особо не к чему. Максимум можно прикопаться к названию ключа для направления, за место step, назвать direction. Даже setTimeout оформлен так что бы один лишний коллбэк не писать.

[WbICHA]

szQocks, прикопаться тут можно много к чему, как минимум к тому же стейту, но надо ли?)

[szQocks]

WbICHA, не не, со стейтом там всё норм, если ты имеешь ввиду про обновления стейта из useEffect, то там всё продумано, и там всё нормально

но надо ли?)

да это просто, мини код ревью, 1 раз то думаю можно, не наругают надеюсь)

[WbICHA]

szQocks,

не не, со стейтом там всё норм

С технической точки зрения, да, но придраться всегда есть к чему.)
Мне не очень нравится один общий стейт и, особенно, делей в нём. Всё это можно переписать вообще по другому, но, опять же, какого-то реального профита от этого не будет.
Мне в целом не очень нравится кодстайл Цифрового, но сами решения у него хорошие.)

[szQocks]

WbICHA, понял))

[0xD34F]

WbICHA, delay убрал. Но сам общий state... Нет, не отдам.

[WbICHA]

0xD34F, я вообще думал делей в реф запихнуть, но такое решение интересное.)

[szQocks]

0xD34F, а я кстати думал о том что бы поменять useEffect местами и что-то с этим придумать, но ничего не придумал, так как акцентировал внимание на обновлениях стейта а не на рекурсии, узкое моё мышление снова даёт о себе знать