visually-impaired-adapt

«Версия для слабовидящих» для React — без сторонних зависимостей.

• Темы: белая / чёрная / синяя / коричневая / зелёная
• Размер шрифта: 14–32 px с шагом 2 px (масштабирует и заголовки)
• Семейство шрифтов: Arial / Times New Roman
• Межстрочный и межбуквенный интервал: обычный / средний / большой
• Картинки: показать / скрыть / обесцветить
• Встроенные элементы: показать / скрыть (iframe, video, audio, object, embed)
• Сохранение настроек: в localStorage
• SSR-safe: все обращения к window/document под guard'ом
• Без сторонних JS: ~6 KB кода + ~12 KB CSS

Установка

npm install visually-impaired-adapt

Требует React ≥ 18 и react-dom (панель монтируется через createPortal).

Использование

// main.tsx
import "visually-impaired-adapt/styles.css";

// App.tsx
import { BviProvider, BviToggleButton } from "visually-impaired-adapt";

export function App() {
  return (
    <BviProvider>
      <header>
        <BviToggleButton />
      </header>
      {/* остальное приложение */}
    </BviProvider>
  );
}

Всё. BviProvider сам:

• читает сохранённые настройки и состояние активности из localStorage,
• при включении навешивает body.bvi-active и data-bvi-* атрибуты,
• рендерит панель управления через createPortal(document.body),
• при выключении полностью очищает body от своих атрибутов.

Кастомизация кнопки

<BviToggleButton
  title="Доступная версия"
  showLabel={false}
  iconSize={20}
  className="my-btn"
  style={{ color: "white" }}
/>

Своя панель управления

Если хотите свой UI вместо встроенной панели — передайте renderPanel={false} и используйте хуки:

import { BviProvider, useBvi, useBviSettings } from "visually-impaired-adapt";

function MyPanel() {
  const { isActive, close } = useBvi();
  const { settings, update, reset } = useBviSettings();

  if (!isActive) return null;

  return (
    <div>
      <button onClick={() => update({ theme: "black" })}>Чёрная тема</button>
      <button onClick={() => update({ fontSize: settings.fontSize + 2 })}>А+</button>
      <button onClick={reset}>Сбросить</button>
      <button onClick={close}>Обычная версия</button>
    </div>
  );
}

<BviProvider renderPanel={false}>
  <MyPanel />
  …
</BviProvider>

Защита элементов от стилей BVI

Декоративным SVG-иконкам, логотипам и т. п. добавляйте класс bvi-no-styles — стили тем их не затронут.

<svg className="bvi-no-styles">…</svg>

API

| Экспорт | Тип | Описание | |---|---|---| | BviProvider | компонент | Контекст + DOM-эффекты + опциональная встроенная панель | | BviToggleButton | компонент | Кнопка-переключатель: вызывает toggle() | | BviPanel | компонент | Сама панель управления (для ручного рендеринга) | | BviIcon | компонент | SVG-«глаз» | | useBvi() | хук | { isActive, open, close, toggle } | | useBviSettings() | хук | { settings, update, reset } | | DEFAULT_SETTINGS | константа | Значения по умолчанию | | MIN_FONT_SIZE, MAX_FONT_SIZE, FONT_SIZE_STEP | константы | Границы и шаг шрифта | | clampSettings(partial) | функция | Валидирует и склеивает с дефолтами |

Типы

type BviTheme = "white" | "black" | "blue" | "brown" | "green";
type BviImagesMode = "true" | "false" | "grayscale";
type BviSpacing = "normal" | "average" | "big";
type BviFontFamily = "arial" | "times";

interface BviSettings {
  theme: BviTheme;
  fontSize: number;        // 14–32
  fontFamily: BviFontFamily;
  lineHeight: BviSpacing;
  letterSpacing: BviSpacing;
  images: BviImagesMode;
  builtElements: boolean;
}

Пропы BviProvider

interface BviProviderProps {
  children: ReactNode;
  /** Рендерить встроенную панель. По умолчанию `true`. */
  renderPanel?: boolean;
  /** Принудительные настройки при старте (перебивают localStorage). */
  initialSettings?: Partial<BviSettings>;
  /** Принудительно активировать режим при монтировании. */
  initialActive?: boolean;
}

Лицензия

MIT.