BjToast

BjToast est contrôlé de l’extérieur : props toasts (tableau ToastItem), onRemove(id), position optionnelle. Utilisez le hook useToast pour add / remove et passer toasts et remove au composant.

Utilisation

import { BjToast, useToast } from '@flrxnt/dsbj/react'

export default function App() {
  const { toasts, add, remove } = useToast()

  return (
    <>
      <button
        type="button"
        onClick={() => add({ text: 'Opération réussie', type: 'success', title: 'Succès' })}
      >
        Afficher un toast
      </button>
      <BjToast toasts={toasts} onRemove={remove} />
    </>
  )
}

Aperçu

Succès

Opération réussie.

Erreur

Une erreur est survenue.

Forme de ToastItem

import type { ToastItem } from '@flrxnt/dsbj/react'

/** Champs attendus pour chaque entrée du tableau toasts */
const exemple: ToastItem = {
  id: 'abc',
  text: 'Message',
  type: 'info',
  duration: 5000,
  removing: false,
  title: 'Optionnel',
}

useToast : add et remove

import { useCallback } from 'react'
import { BjToast, useToast } from '@flrxnt/dsbj/react'

export function ToastDemo() {
  const { toasts, add, remove } = useToast()

  const notify = useCallback(() => {
    add({
      text: 'Corps du message',
      type: 'warning',
      title: 'Titre',
      duration: 4000,
    })
  }, [add])

  return (
    <>
      <button type="button" onClick={notify}>Notifier</button>
      <BjToast toasts={toasts} onRemove={remove} />
    </>
  )
}

Aperçu HTML — classes de position

top-right (défaut)

Info

top-left

bottom-right

Attention

bottom-left

Erreur

position top-right (défaut)

<BjToast position="top-right" toasts={toasts} onRemove={remove} />

position top-left

<BjToast position="top-left" toasts={toasts} onRemove={remove} />

position bottom-right

<BjToast position="bottom-right" toasts={toasts} onRemove={remove} />

position bottom-left

<BjToast position="bottom-left" toasts={toasts} onRemove={remove} />

Callback onRemove

Chaque toast affiche un bouton fermer qui appelle onRemove(id). Avec useToast, remove marque removing puis retire l’item après l’animation.

Clic sur × → onRemove(id)

import { useCallback } from 'react'
import { BjToast, useToast } from '@flrxnt/dsbj/react'

export function ToastRemoveDemo() {
  const { toasts, add, remove } = useToast()

  const logRemove = useCallback(
    (id: string) => {
      console.log('dismiss', id)
      remove(id)
    },
    [remove],
  )

  return (
    <>
      <button type="button" onClick={() => add({ text: 'Fermez-moi', type: 'info' })}>Toast</button>
      <BjToast toasts={toasts} onRemove={logRemove} />
    </>
  )
}

Types de notification (info, success, warning, error)

type info

type success

type warning

type error

import { BjToast, useToast } from '@flrxnt/dsbj/react'

export function AllTypes() {
  const { toasts, add, remove } = useToast()
  return (
    <>
      <button type="button" onClick={() => add({ text: 'Info', type: 'info' })}>info</button>
      <button type="button" onClick={() => add({ text: 'OK', type: 'success' })}>success</button>
      <button type="button" onClick={() => add({ text: 'Attention', type: 'warning' })}>warning</button>
      <button type="button" onClick={() => add({ text: 'Erreur', type: 'error' })}>error</button>
      <BjToast toasts={toasts} onRemove={remove} />
    </>
  )
}

duration et title optionnels

add({ text: 'Sans auto-fermeture', type: 'info', duration: 0 })
add({ text: '5 s par défaut dans useToast si omis', type: 'success' })

Flux entièrement contrôlé

import { useCallback, useState } from 'react'
import type { ToastItem } from '@flrxnt/dsbj/react'
import { BjToast } from '@flrxnt/dsbj/react'

/** Contrôle manuel sans useToast (vous gérez removing / durée vous-même) */
export function ManualToasts() {
  const [toasts, setToasts] = useState<ToastItem[]>([])

  const onRemove = useCallback((id: string) => {
    setToasts((prev) => prev.filter((t) => t.id !== id))
  }, [])

  return (
    <BjToast
      className="my-toasts"
      position="bottom-right"
      toasts={toasts}
      onRemove={onRemove}
    />
  )
}

Props

Prop	Description
`position`	top-left
`toasts`	ToastItem[] : id, text, type, duration, removing, title optionnel.
`onRemove`	(id: string) => void — appelé au clic sur fermer ; useToast.remove gère l’animation.
`className`	Classe sur le conteneur .bj-toast-container.