ToastProvider
ToastProvider é dono de uma fila de confirmações curtas e não bloqueantes. Escolha-o quando um descendente precisar anunciar um resultado sem propagar estado de notificação por todos os componentes intermediários; use Toast e ToastStack diretamente quando esse estado de apresentação já for seu.
Exemplos
Enviar uma confirmação
Envolva a parte da aplicação que precisa de notificações e então chame success em um
descendente. O provider fornece ícone, controle de fechar e pilha fixa para cada toast
enfileirado.
Duração por toast
duration define o padrão do provider, enquanto as opções passadas a toast o sobrescrevem para
uma notificação. Passe 0 para uma notificação que permanece até a pessoa dispensá-la.
Quando usar
Use ToastProvider quando vários descendentes precisarem de uma API imperativa compartilhada de notificações.
Prefira outro componente quando:
- Você já controla a lista de notificações visíveis — use diretamente os componentes de baixo nível Toast e ToastStack.
- A mensagem pertence ao conteúdo da página — use Alert.
- Alguém precisa decidir antes de continuar — use Dialog.
Acessibilidade
- ToastProvider compõe Toast, cujas mensagens são regiões ao vivo polidas com
role="status". Um toast breve pode passar despercebido, portanto não pode ser o único lugar para informação importante. - Cada toast enfileirado recebe um botão de fechar cujo nome acessível vem de
closeLabel, com padrão "Close notification". Forneça uma cópia localizada quando necessário. - O ToastStack do provider fica fixo no canto inferior direito do viewport. Mantenha mensagens breves e não deixe a pilha substituir um status persistente.
API e código
Blade: O snapshot de API lançado do Blade v0.10.0 não tem componente para esta entrada do catálogo.
| Nome | Tipo | Obrigatória | Descrição |
|---|---|---|---|
duration | number | — | Default auto-dismiss delay in milliseconds. `0` disables auto-dismiss. Default: `4000`. |
closeLabel | string | — | Accessible name passed to every composed Toast close button. Default: `"Close notification"`. |
children | ReactNode | Obrigatória |
useToast
Chame useToast somente abaixo de ToastProvider; fora dele, o hook lança um erro. Ele retorna toast,
success, error e info, e cada um enfileira uma mensagem e retorna um id numérico local ao provider.
Chame dismiss(id) para remover uma notificação antes de seu timer expirar. A duration opcional de uma
chamada sobrescreve o padrão do provider para aquele toast, e 0 desativa seu timer de auto-dismiss.
Métodos da API mantidos depois que o provider desmonta são no-ops seguros: retornam um id, mas não colocam
estado na fila nem deixam um timer.
ToastProvider é estado e temporização React; em HTML puro, use os primitives resultantes. A fila, timers de auto-dismiss e o comportamento de fechar ficam com você:
<div class="lyra-toast-stack">
<div class="lyra-toast" role="status">
<span class="lyra-toast__icon lyra-toast__icon--success" aria-hidden="true">✓</span>
<span>Projeto publicado</span>
<button class="lyra-toast__close" type="button" aria-label="Fechar notificação">×</button>
</div>
</div>