BjDrawer — React

Composant React pour le tiroir latéral DSBJ, rendu via portal avec gestion du focus et de la touche Escape.

Utilisation

import { useState } from 'react'
import { BjDrawer } from '@flrxnt/dsbj/react'

function App() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button className="bj-btn" onClick={() => setOpen(true)}>
        Ouvrir le tiroir
      </button>
      <BjDrawer
        open={open}
        onClose={() => setOpen(false)}
        title="Mon tiroir"
        footer={
          <>
            <button className="bj-btn bj-btn--tertiary" onClick={() => setOpen(false)}>
              Annuler
            </button>
            <button className="bj-btn">Valider</button>
          </>
        }
      >
        <p>Contenu du tiroir.</p>
      </BjDrawer>
    </>
  )
}

Aperçu interactif

Props

ClasseDescription
openContrôle l'ouverture du tiroir.
onCloseCallback appelé à la fermeture.
positionPosition : "left" (défaut) ou "right".
sizeTaille : "default", "sm", "lg" ou "full".
titleTitre affiché dans l'en-tête.
footerReactNode affiché dans le pied du tiroir.

Accessibilité

Le composant utilise role="dialog" et aria-modal="true". Le focus est piégé dans le tiroir. La touche Escape ferme le tiroir.