Components Library

Une bibliothèque de composants React modernes et réutilisables.

Installation

npm install @mkwebdev/components-library-02
# ou
yarn add @mkwebdev/components-library-02

Utilisation

Composants

import { Button, DataFetcher, Provider } from "@mkwebdev/components-library-02";

function App() {
  return (
    <Provider>
      <Button variant="primary" onClick={() => console.log("Cliqué!")}>
        Cliquez-moi
      </Button>

      <DataFetcher postId={1} />
    </Provider>
  );
}

Hooks personnalisés

import { useData } from "@mkwebdev/components-library-02";

function MyComponent() {
  const { data, isLoading, error } = useData({
    queryKey: "my-data",
    fetchFn: async () => {
      const response = await fetch("https://api.example.com/data");
      return response.json();
    },
  });

  if (isLoading) return <div>Chargement...</div>;
  if (error) return <div>Erreur</div>;

  return <div>{JSON.stringify(data)}</div>;
}

Chargement de données avec DataLoader

import { DataLoader } from "@mkwebdev/components-library-02";

interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile({ userId }: { userId: number }) {
  return (
    <DataLoader<User>
      queryKey={`user-${userId}`}
      fetchFn={async () => {
        const response = await fetch(`/api/users/${userId}`);
        return response.json();
      }}
      loadingComponent={<div>Chargement du profil...</div>}
      errorComponent={(error) => (
        <div className="error">Erreur de chargement: {error.message}</div>
      )}
    >
      {(user) => (
        <div>
          <h1>{user.name}</h1>
          <p>{user.email}</p>
        </div>
      )}
    </DataLoader>
  );
}

// Exemple avec une liste
function UsersList() {
  return (
    <DataLoader<User[]>
      queryKey="users-list"
      fetchFn={async () => {
        const response = await fetch("/api/users");
        return response.json();
      }}
    >
      {(users) => (
        <ul>
          {users.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
    </DataLoader>
  );
}

Composants disponibles

Button

Un composant bouton personnalisable avec différentes variantes.

Props:

• children: Le contenu du bouton
• variant: 'primary' | 'secondary' (défaut: 'primary')
• disabled: boolean (défaut: false)
• onClick: () => void (optionnel)

DataFetcher

Un composant exemple qui utilise le hook useData pour récupérer et afficher des données.

Props:

• postId: number - L'ID du post à récupérer

DataLoader

Un composant générique pour charger et afficher des données avec gestion des états de chargement et d'erreur.

Props:

• queryKey: string - Clé unique pour la requête
• fetchFn: () => Promise - Fonction de récupération des données
• children: (data: T) => React.ReactNode - Fonction de rendu des données
• loadingComponent?: React.ReactNode - Composant à afficher pendant le chargement
• errorComponent?: (error: Error) => React.ReactNode - Composant à afficher en cas d'erreur
• enabled?: boolean - Active ou désactive la requête

Hooks disponibles

useData

Un hook personnalisé pour la récupération de données avec react-query.

Options:

• queryKey: string - Clé unique pour la requête
• fetchFn: () => Promise - Fonction de récupération des données
• enabled: boolean (optionnel) - Active ou désactive la requête

Scripts disponibles

• npm run build: Compile la librairie
• npm run test: Lance les tests
• npm run lint: Vérifie le code avec ESLint

Licence

MIT