@sk1llahh/react-bvi/readme.md

React BVI — библиотека для добавления режима слабовидящих на любой сайт. Панель настроек доступности: контрастность, шрифты, цвета, TTS, изображения и др.

# 📦 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,
    toggleActive,
    setTheme,
    setSize,
    setImagesMode,
    setLineHeight,
    setLetterSpacing,
    setFontFamily,
    setFlashIframe,
    resetToDefaults,
    setTtsEnabled,
    speakPage,
    stopSpeak,
    togglePanelHidden
 } = useBvi();
```

---


# 🎧 Text-to-Speech (Web Speech API)

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

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

Работает в:

- Chrome
- Edge
- Android Chrome

---


# 📄 Лицензия

**MIT**

---


# 💬 Поддержка

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