API

Référence de l'API

Documentation complète de toutes les fonctions, hooks, composants et utilitaires disponibles dans notre framework.

Hooks

4 éléments

useAuth

Hook pour gérer l'authentification utilisateur

function useAuth(): AuthContext

Exemple d'utilisation

import { useAuth } from 'ud-framework/auth';

// Dans votre composant
function ProfilePage() {
  const { user, login, logout } = useAuth();
  
  return (
    <div>
      {user ? (
        <>
          <h1>Bonjour, {user.name}</h1>
          <button onClick={logout}>Déconnexion</button>
        </>
      ) : (
        <button onClick={login}>Connexion</button>
      )}
    </div>
  );
}

useMedia

Hook réactif pour les requêtes media

function useMedia(query: string): boolean

Exemple d'utilisation

import { useMedia } from 'ud-framework/hooks';

function ResponsiveComponent() {
  const isMobile = useMedia('(max-width: 768px)');
  
  return (
    <div>
      {isMobile ? (
        <MobileView />
      ) : (
        <DesktopView />
      )}
    </div>
  );
}

useAnimation

Hook pour contrôler les animations

function useAnimation(options?: AnimationOptions): AnimationControls

Exemple d'utilisation

import { useAnimation } from 'ud-framework/animation';

function AnimatedComponent() {
  const controls = useAnimation({
    duration: 0.5,
    ease: 'easeOut'
  });
  
  const handleAnimate = () => {
    controls.start({ opacity: 1, y: 0 });
  };
  
  return (
    <div>
      <button onClick={handleAnimate}>Animer</button>
      <div ref={controls.ref} style={{ opacity: 0, transform: 'translateY(20px)' }}>
        Contenu animé
      </div>
    </div>
  );
}

useStorage

Hook pour interagir avec le stockage local/session

function useStorage(key: string, initialValue?: any, options?: StorageOptions): [value, setValue]

Exemple d'utilisation

import { useStorage } from 'ud-framework/storage';

function ThemeSelector() {
  const [theme, setTheme] = useStorage('theme', 'light', { storage: 'local' });
  
  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>
  );
}