componente · @solu30/ui-kit/feedback

ToastProvider

Se monta una sola vez en la raíz de la app y dibuja los toasts que dispara la API toast.

Seguir leyendo — 1 párrafo más

Mount once at your app root (e.g. layout.tsx). Renders toasts in a portal anchored to the specified position. No React context required — use the imperative toast API or the useToast() hook.

25 sitios de import en 7 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

carlosmartinpavon
cmp-packages
dietaly
gestorsalon
luigi
raquetea
zentrya

La pieza, con lugar de pantalla

Cargando el espécimen…

export function ToastMatrix() {
  const { success, error, warning, info } = useToast()

  return (
    <Stage label="Toast · la API imperativa y el ToastProvider que la dibuja" tall wide>
      <div className="flex flex-col items-center gap-2">
        <Row>
          <TriggerButton onClick={() => success('Pedido #482 marcado como entregado')}>success</TriggerButton>
          <TriggerButton
            tone="danger"
            onClick={() =>
              error('No se pudo cobrar la seña de la reserva', {
                action: { label: 'Reintentar', onClick: () => info('Reintentando cobro…') },
              })
            }
          >
            error + acción
          </TriggerButton>
          <TriggerButton onClick={() => warning('Vientos de 22 nudos previstos para el regreso')}>
            warning
          </TriggerButton>
          <TriggerButton onClick={() => info('Sincronizando stock con la sucursal Alta Córdoba…')}>
            info
          </TriggerButton>
        </Row>
        <p className="max-w-[420px] text-center text-[11px] text-content/60">
          La llamada (`toast.success(...)`) y el que la dibuja son dos piezas: el store vive en el
          módulo y no necesita contexto, así que sin un `ToastProvider` montado la llamada anda,
          no falla, y no se ve nada.
        </p>
      </div>
      {/* El que dibuja, con la línea EXACTA que escriben los verticales:
          `raquetea/src/features/escuela/ui/groups-admin.tsx:433`,
          `…/tienda/ui/tienda-admin.tsx:637` y `…/ajustes/ui/ajustes-admin.tsx:180`
          ponen `<ToastProvider position="bottom-right" />` al final del árbol
          de la pantalla, al lado del `toast` que importan del kit. Ninguno le
          pasa `duration`. Va acá y no en el layout raíz del Muestrario porque
          ese layout no monta ningún provider — ver el JSDoc de arriba. */}
      <ToastProvider position="bottom-right" />
    </Stage>
  )
}

De specimens/feedback.tsx · ToastMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { ToastProvider } from '@solu30/ui-kit/feedback'

Props

2 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
position	opcional	`'top-right' \| 'top-center' \| 'bottom-right' \| 'bottom-center'`	Position of the toast container. Defaults to 'bottom-right'.
duration	opcional	`number`	Auto-cierre por default de todos los toasts, en ms. Un `duration` pasado en la llamada a `toast()` le gana. No afecta a los de tipo `loading`, que nunca se cierran solos.

Ejemplo del paquete

  // layout.tsx
  import { ToastProvider } from '@solu30/ui-kit'
  export default function Layout({ children }) {
    return <html><body>{children}<ToastProvider position="bottom-right" /></body></html>
  }

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.