npm package: @sk1llahh/react-bvi
Description: React BVI — библиотека для добавления режима слабовидящих на любой сайт. Панель настроек доступности: контрастность, шрифты, цвета, TTS, изображения и др.
Latest version: 2.1.0

# 📦 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()`

---

# 📥 Установка

```bash
npm install @sk1llahh/react-bvi
```

---

# ⚙️ Подключение

```jsx
import { BviProvider, BviButton, useBvi } from "@sk1llahh/react-bvi";
import "@sk1llahh/react-bvi/dist/style.css";

```

---

# 🚀 Быстрый старт

```jsx
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>
  );
}
```

---

# 🧩 Переводы


```jsx
    {
        "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.

Пример:

```jsx
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.