Реакт субтитры

npm install --save rc-bullets

import React, { useEffect, useState } from 'react';
import BulletScreen, { StyledBullet } from 'rc-bullets';

const headUrl = 'https://zerosoul.github.io/rc-bullets/assets/img/heads/girl.jpg';
export default function Demo() {
  // Экран субтитров
  const [screen, setScreen] = useState(null);
  // Содержание субтитра
  const [bullet, setBullet] = useState('');

  useEffect(() => {
    // Инициализация экрана субтитров для определенного элемента страницы, обычно это большой блок. Настройки здесь применяются глобально
    let s = new BulletScreen('.screen', { duration: 20 });
    // или
    // let s = new BulletScreen(document.querySelector('.screen'));
    setScreen(s);
  }, []);

  // Обработка события изменения содержания субтитра
  const handleChange = ({ target: { value } }) => {
    setBullet(value);
  };

  // Отправка субтитра
  const handleSend = () => {
    if (bullet) {
      // Добавление чистого текста
      screen.push(bullet);
      // или использование StyledBullet
    }
  };
}
```      screen.push(
        <StyledBullet
          head={headUrl}
          msg={bullet}
          backgroundColor={'#fff'}
          size='large'
        />
      );
      // or you can use this way, the effect is similar to using the StyledBullet component
      screen.push({msg: bullet, head: headUrl, color: "#eee", size: "large", backgroundColor: "rgba(2,2,2,.3)"})
    }
  };
  return (
    <main>
      <div className="screen" style={{ width: '100vw', height: '80vh' }}></div>
      <input value={bullet} onChange={handleChange} />
      <button onClick={handleSend}>Отправить</button>
    </main>
  );
}
```## Возможности

- Поддерживает передачу React-компонентов, что позволяет гибко контролировать содержание и внешний вид субтитров, а также предоставляет встроенную компоненту стилей `<StyledBullet />`.
- Управление экраном субтитров: очистка, приостановка, скрытие (в будущем могут быть добавлены возможности управления отдельными субтитрами).
- Параметризация анимации субтитров: функции движения (постоянная скорость/ease/шаговая/cubic-bezier), длительность (в секундах), количество повторений, задержка и т.д.
- При наведении указателя мыши на субтитр он приостанавливается.

## Часто используемые API

- Инициализация экрана с буллетами: `const screen = new BulletScreen(<queryString>|<HTMLElement>, [<option>])`, где параметр `option` используется также в других местах, обычно для глобальной инициализации. Если параметр `option` не указан, используются значения по умолчанию. При отправке каждого нового сообщения буллета, если параметр `option` не передается, используются либо значения по умолчанию, либо глобальные настройки.
- Отправка буллета: `const bulletId = screen.push(<string>|<ReactElement>, [<option>])````markdown
`option`:| Опция         | Значение             | Тип значения     | По умолчанию | Примечание                                                                                                                     |
 | -------------- | -------------------- | ----------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------|
 | top            | Расположение субтитров | строка           | неопределено | Устанавливает расстояние от верха, аналогично CSS свойству `top`                                                              |
 | trackHeight    | Высота дорожки       | строка           | 50px         | Указывает высоту каждой дорожки                                                                                              |
 | onStart        | Функция начала анимации | функция         | null         | Например, `(bulletId, screen) => { // выполните что-то }`. Можно задать свои действия, такие как воспроизведение звука или приостановка субтитра: `screen.pause(bulletId)` |
 | onEnd          | Функция завершения анимации | функция         | null         | Например, `(bulletId, screen) => { // выполните что-то }`. Можно задать свои действия, такие как воспроизведение звука                                                               |
 | pauseOnClick   | Приостановление по клику | логическое значение | false       | Второй клик продолжает                                                                               |
 | pauseOnHover   | Приостановление по наведению мыши | логическое значение | true        | При входе в область приостановка, при выходе продолжение                                                                       |