@dolu13/react-accessibility-config/dist/hooks/useAccessibilitySettings.js

Composant React réutilisable pour les personnaliser l'accessibilité avec style Material-UI

import { useState, useEffect } from 'react';
export const useAccessibilitySettings = (defaultSettings = {}) => {
    const [settings, setSettings] = useState(Object.assign({ contrast: 'default', font: 'default', lineHeight: 'default', alignment: 'left' }, defaultSettings));
    const [isLoaded, setIsLoaded] = useState(false);
    // Charger les paramètres depuis localStorage
    useEffect(() => {
        const savedSettings = localStorage.getItem('accessibility-settings');
        if (savedSettings) {
            try {
                const parsed = JSON.parse(savedSettings);
                setSettings(prev => (Object.assign(Object.assign({}, prev), parsed)));
            }
            catch (error) {
                console.error('Erreur lors du chargement des paramètres:', error);
            }
        }
        setIsLoaded(true);
    }, []);
    // Sauvegarder et appliquer les paramètres
    useEffect(() => {
        if (isLoaded) {
            localStorage.setItem('accessibility-settings', JSON.stringify(settings));
        }
    }, [settings, isLoaded]);
    // Écouter les changements de localStorage
    useEffect(() => {
        const handleStorageChange = (e) => {
            if (e.key === 'accessibility-settings' && e.newValue) {
                try {
                    setSettings(prev => (Object.assign(Object.assign({}, prev), JSON.parse(e.newValue))));
                }
                catch (error) {
                    console.error('Erreur lors de la mise à jour des paramètres:', error);
                }
            }
        };
        window.addEventListener('storage', handleStorageChange);
        return () => window.removeEventListener('storage', handleStorageChange);
    }, []);
    const updateSettings = (category, value) => {
        setSettings(prev => (Object.assign(Object.assign({}, prev), { [category]: value })));
    };
    const resetSettings = () => {
        const resetDefaults = {
            contrast: 'default',
            font: 'default',
            lineHeight: 'default',
            alignment: 'left',
        };
        setSettings(resetDefaults);
    };
    return {
        settings,
        updateSettings,
        resetSettings,
        isLoaded
    };
};