react-colorblind-filter

v1.0.0

Published

a month ago

Module React pour simuler différents types de daltonisme avec des filtres visuels

0High
0Medium
0Low

lafraude67

react colorblind accessibility a11y daltonism color-filter protanopia deuteranopia tritanopia achromatopsia

🕶️ react-colorblind-filter

Module React/TypeScript pour simuler différents types de daltonisme sur votre application web. Fonctionne comme des "lunettes virtuelles" sans modifier le CSS existant.

✨ Fonctionnalités

🎨 5 types de filtres (vision normale + 4 types de daltonisme)
🚀 Installation simple via npm
💡 API intuitive avec Context API
🎯 TypeScript support complet
🪶 Léger et sans dépendances externes
♿ Améliore l'accessibilité de vos tests

📦 Installation

npm install react-colorblind-filter
# ou
yarn add react-colorblind-filter
# ou
pnpm add react-colorblind-filter

🚀 Utilisation Rapide

1. Wrapper votre app avec le Provider

import { ColorBlindFilterProvider } from 'react-colorblind-filter';

function App() {
  return (
    <ColorBlindFilterProvider>
      <YourApp />
    </ColorBlindFilterProvider>
  );
}

2. Utiliser le composant Select

import { ColorBlindFilterSelect } from 'react-colorblind-filter';

function Navbar() {
  return (
    <nav>
      <label>Mode d'accessibilité :</label>
      <ColorBlindFilterSelect />
    </nav>
  );
}

3. Ou créer votre propre contrôle

import { useColorBlindFilter } from 'react-colorblind-filter';

function CustomControl() {
  const { filterType, setFilterType } = useColorBlindFilter();

  return (
    <select 
      value={filterType} 
      onChange={(e) => setFilterType(e.target.value)}
    >
      <option value="none">Normal</option>
      <option value="protanopia">Protanopie</option>
      <option value="deuteranopia">Deutéranopie</option>
      <option value="tritanopia">Tritanopie</option>
      <option value="achromatopsia">Achromatopsie</option>
    </select>
  );
}

📚 API

`<ColorBlindFilterProvider>`

Composant Provider à placer à la racine de votre app.

<ColorBlindFilterProvider>
  {children}
</ColorBlindFilterProvider>

`useColorBlindFilter()`

Hook React pour accéder au filtre.

const { filterType, setFilterType } = useColorBlindFilter();

// filterType: 'none' | 'protanopia' | 'deuteranopia' | 'tritanopia' | 'achromatopsia'
// setFilterType: (type: ColorBlindType) => void

`<ColorBlindFilterSelect>`

Composant Select prêt à l'emploi.

Props :

className?: string - Classes CSS
style?: React.CSSProperties - Styles inline

<ColorBlindFilterSelect 
  className="my-select" 
  style={{ fontSize: '16px' }} 
/>

🎨 Types de Daltonisme

| Type | Description | |------|-------------| | none | Vision normale | | protanopia | Difficulté à percevoir le rouge | | deuteranopia | Difficulté à percevoir le vert | | tritanopia | Difficulté à percevoir le bleu | | achromatopsia | Vision en noir et blanc uniquement |

💡 Exemples

Avec des boutons radio

import { useColorBlindFilter, ColorBlindType } from 'react-colorblind-filter';

function FilterSettings() {
  const { filterType, setFilterType } = useColorBlindFilter();

  return (
    <>
      {['none', 'protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia'].map((type) => (
        <label key={type}>
          <input
            type="radio"
            value={type}
            checked={filterType === type}
            onChange={(e) => setFilterType(e.target.value as ColorBlindType)}
          />
          {type}
        </label>
      ))}
    </>
  );
}

Avec des boutons

function FilterButtons() {
  const { setFilterType } = useColorBlindFilter();

  return (
    <>
      <button onClick={() => setFilterType('none')}>Normal</button>
      <button onClick={() => setFilterType('protanopia')}>Protanopie</button>
      <button onClick={() => setFilterType('deuteranopia')}>Deutéranopie</button>
    </>
  );
}

🔧 Comment ça marche ?

Le module utilise des filtres SVG appliqués dynamiquement sur l'élément <html> via la propriété CSS filter. Les matrices de couleurs simulent les différents types de daltonisme de manière non-invasive, sans modifier le CSS existant de votre application.

🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou une pull request sur GitHub.

📄 Licence

🙏 Crédits

Les matrices de couleurs sont basées sur des recherches scientifiques sur le daltonisme.