Reddot UI Library

Docs
Modal Switch

Modal Switch

A responsive modal component that automatically switches between Dialog (desktop) and Drawer (mobile) based on screen size.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/modal-switch.json

Structure des fichiers

Ce composant inclut les fichiers suivants :

  • index.tsx : Composant principal
  • dialog.tsx : Composant principal
  • drawer.tsx : Composant principal

Utilisation

import { ModalSwitch } from '@/blocks/modal-switch';
 
export default function Example() {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      
      <ModalSwitch
        isModalOpen={isOpen}
        setIsModalOpen={setIsOpen}
        title="Modal Title"
      >
        <p>Your modal content goes here</p>
      </ModalSwitch>
    </>
  );
}

Props

interface Props extends PropsWithChildren {
  title?: ReactNode;
  isModalOpen: boolean;
  isTitleCentered?: boolean;
  drawerClassName?: string;
  modalClassName?: string;
  closeClassName?: string;
  closable?: boolean;
  setIsModalOpen?: (open: boolean) => void;
}

Dépendances

Ce composant nécessite les dépendances suivantes :

  • https://reddot.dottools.xyz/r/dialog.json
  • https://reddot.dottools.xyz/r/drawer.json
  • https://reddot.dottools.xyz/r/use-mobile.json

Exemple

Voici un exemple d'utilisation du composant Modal Switch :

import { ModalSwitch } from '@/blocks/modal-switch';
import { useState } from 'react';
 
export default function ExamplePage() {
  const [isModalOpen, setIsModalOpen] = useState(false);
 
  return (
    <div className="p-4">
      <button 
        className="px-4 py-2 bg-blue-500 text-white rounded"
        onClick={() => setIsModalOpen(true)}
      >
        Open Modal
      </button>
 
      <ModalSwitch
        isModalOpen={isModalOpen}
        setIsModalOpen={setIsModalOpen}
        title="Welcome"
        isTitleCentered
        modalClassName="max-w-lg"
      >
        <div className="p-4">
          <p>This modal will display as a Dialog on desktop and as a Drawer on mobile devices.</p>
          <button 
            className="mt-4 px-4 py-2 bg-gray-500 text-white rounded"
            onClick={() => setIsModalOpen(false)}
          >
            Close
          </button>
        </div>
      </ModalSwitch>
    </div>
  );
}

Notes

  • Ce composant block fait partie du système de design
  • Peut être utilisé comme composant autonome ou intégré dans des pages complexes
  • Respecte les conventions de style et d'accessibilité
  • Utilise automatiquement le composant Dialog sur desktop et Drawer sur mobile
  • Le titre peut être centré avec la prop isTitleCentered
  • Les classes CSS peuvent être personnalisées pour le modal, le drawer et le bouton de fermeture