React BVI — это React-библиотека, которая добавляет на любой сайт полноценный режим для слабовидящих пользователей: панель настроек контрастности, цветов, размера шрифта, межстрочного и межбуквенного интервала, изображений, шрифтов и других параметров доступности.
Библиотека полностью повторяет функциональность оригинального BVI (https://bvi.isvek.ru/ustanovka-plagina/javascript/), но переписана на современный React без jQuery и с поддержкой Web Speech API (TTS).
- ✔ Полностью без jQuery
- ✔ Полностью на React
- ✔ Web Speech API (TTS)
- ✔ Озвучивание текста по клику
- ✔ Увеличение шрифта, темы, контрастность
- ✔ Межстрочный и межбуквенный интервал
- ✔ Отключение / скрытие / обесцвечивание изображений
- ✔ Переключение шрифтов (Arial / Times)
- ✔ Управление встроенными элементами (видео, карты и т.д.)
- ✔ Фиксация панели, скрытие, отображение
- ✔ Полный доступ к API через хук
useBvi()
npm install @sk1llahh/react-bvi
import { BviProvider, BviButton, useBvi } from "@sk1llahh/react-bvi"; import "@sk1llahh/react-bvi/dist/style.css";
import { BviProvider, BviButton } from "@sk1llahh/react-bvi"; import "@sk1llahh/react-bvi/dist/style.css"; function Layout() { return ( <> <header> <BviButton> <Icon /> </BviButton> </header> </> ); } export default function App() { return ( <BviProvider> <Layout /> </BviProvider> ); }
{ "bvi": { "title": "Сайт для слабовидящих", "button": "Обычная версия сайта", "font-size": "Размер шрифта", "color": "Цвета сайта", "image": "Изображения", "add": "Дополнительно", "setting": "Настройки", "line-height": "Междустрочный интервал", "l-h-default": "Стандартный", "l-h-middle": "Средний", "l-h-big": "Большой", "letter-spacing": "Межбуквенный интервал", "l-s-1": "Одинарный", "l-s-15": "Полуторный", "l-s-2": "Двойной", "font-family": "Шрифт", "ff-arial": "Без засечек", "ff-times": "С засечками", "elements": "Встроенные элементы (Видео, карты и тд.)", "on": "Включить", "off": "Выключить", "default_settings": "Настройки по умолчанию", "close_panel": "Закрыть панель", } }
Главный провайдер BVI. Оборачивает всё приложение.
- Размер шрифта
- Цветовые темы
- Изображения
- Межстрочный интервал
- Межбуквенный интервал
- Тип шрифта
- Встроенные элементы
- TTS
- Читать страницу / Остановить чтение
- Настройки по умолчанию
- Скрыть / показать панель
Кнопка включения режима слабовидящих.
Принимает children: иконку, текст, кнопку — что угодно.
Хук для доступа к API режима BVI.
Пример:
const { state, // текущее состояние BVI toggleActive, // включить/выключить режим setTheme, // темы: white/black/blue/brown/green setSize, // размер шрифта (px) setImagesMode, // изображения: "true" | "false" | "grayscale" setLineHeight, // line-height: normal/average/big setLetterSpacing, // letter-spacing: normal/average/big setFontFamily, // font: default/arial/times setFlashIframe, // встраиваемые элементы: true/false resetToDefaults, // сбросить настройки (без выхода из режима) setTtsEnabled, // включить/выключить TTS speakPage, // прочитать страницу stopSpeak, // остановить озвучку togglePanelHidden, // свернуть/раскрыть панель setTtsLanguage // язык TTS (IETF BCP 47, напр. "kk-KZ", "ru-RU") } = useBvi();
Поддерживает:
- чтение всей страницы
- чтение по клику
- остановку чтения
- включение/выключение через панель
Работает в:
- Chrome
- Edge
- Android Chrome
- Добавлена поддержка озвучки других языков.
- Сохранение выбранного языка озвучки в настройках (localStorage).
- Релиз React-версии BVI с TTS, кликовой озвучкой и базовыми настройками доступности.
MIT
Если хотите добавить новые настройки или улучшения — создавайте Issue или Pull Request.