# 🌀 LoaderButton – Un bouton React avec indicateur de chargement

**@devsyrilpackages/react-loader-button** est un composant React léger et personnalisable qui affiche un indicateur de chargement pendant une action asynchrone. Idéal pour les formulaires, les appels API, ou toute interaction utilisateur nécessitant un retour visuel immédiat.

---

## 🚀 Installation

```bash
npm install @devsyrilpackages/react-loader-button
# ou
yarn add @devsyrilpackages/react-loader-button

🔧 Utilisation de base

import React, { useState } from 'react';
import { LoaderButton } from '@devsyrilpackages/react-loader-button';
import '@devsyrilpackages/dist/react-loader-button.esm.css';

function App() {
  const [loading, setLoading] = useState(false);

  const handleClick = async () => {
    setLoading(true);
    await new Promise((r) => setTimeout(r, 2000));
    setLoading(false);
  };

  return (
    <LoaderButton loading={loading} onClick={handleClick}>
      Envoyer
    </LoaderButton>
  );
}

📦 Props

| Prop | Type | Description | |------------|----------------------|-----------------------------------------------------------------------------| | loading | boolean | Active l’indicateur de chargement. Désactive automatiquement le bouton. | | disabled | boolean | Désactive le bouton manuellement. | | onClick | () => void | Fonction appelée lors du clic. | | children | React.ReactNode | Contenu du bouton (texte, icône, etc.). |

🎨 Personnalisation

Le style par défaut est minimaliste. Tu peux le surcharger via CSS ou intégrer une solution comme Tailwind, styled-components ou CSS Modules.

Exemple avec Tailwind

<LoaderButton
  loading={loading}
  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded"
>
  Sauvegarder
</LoaderButton>

🧪 Tests

Ce package est compatible avec Jest, Vitest ou Testing Library. Exemple de test :

import { render, screen } from '@testing-library/react';
import { LoaderButton } from '@syril/loader-button';

test('affiche le loader quand loading est true', () => {
  render(<LoaderButton loading={true}>Valider</LoaderButton>);
  expect(screen.getByRole('button')).toBeDisabled();
});

🛠️ Développement local

git clone https://github.com/rilboy/react-loader-button.git
cd react-loader-button
yarn install
yarn start

📤 Publication

Ce package est construit avec TSDX. Pour publier :

yarn build
npm publish --access public

📚 Roadmap

• [ ] Support des icônes (avant/après le texte)
• [ ] Animation SVG ou Lottie
• [ ] Variantes (primary, secondary, danger, etc.)
• [ ] Accessibilité renforcée (ARIA)

🤝 Contribuer

Les contributions sont les bienvenues ! Forkez le repo, créez une branche, proposez une PR.

git checkout -b feature/amélioration-loader

📄 Licence

MIT © Syril kokou

💡 Inspiré par

Ce composant s’inscrit dans une démarche de modularité et de transparence, pensée pour les développeurs qui automatisent et enrichissent leurs interfaces avec rigueur et élégance.