📦 React BVI — простое решение доступности для слабовидящих в React

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": "Закрыть панель",
        }
    }

---

🧩 Компоненты

<BviProvider>

Главный провайдер BVI. Оборачивает всё приложение.

• Размер шрифта
• Цветовые темы
• Изображения
• Межстрочный интервал
• Межбуквенный интервал
• Тип шрифта
• Встроенные элементы
• TTS
• Читать страницу / Остановить чтение
• Настройки по умолчанию
• Скрыть / показать панель

<BviButton>

Кнопка включения режима слабовидящих.

Принимает children: иконку, текст, кнопку — что угодно.

useBvi()

Хук для доступа к 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();

---

🎧 Text-to-Speech (Web Speech API)

Поддерживает:

• чтение всей страницы
• чтение по клику
• остановку чтения
• включение/выключение через панель

Работает в:

• Chrome
• Edge
• Android Chrome

---

📝 Changelog

2.1.0

• Добавлена поддержка озвучки других языков.
• Сохранение выбранного языка озвучки в настройках (localStorage).

2.0.0

• Релиз React-версии BVI с TTS, кликовой озвучкой и базовыми настройками доступности.

---

📄 Лицензия

MIT

---

💬 Поддержка

Если хотите добавить новые настройки или улучшения — создавайте Issue или Pull Request.