驴Qu茅 son los componentes Toaster de React?
Un componente toaster en React es una utilidad esencial para mostrar notificaciones de manera efectiva en una aplicaci贸n web. Funciona como un peque帽o cuadro emergente que informa a los usuarios sobre eventos importantes o actualizaciones. Este componente se utiliza com煤nmente para mostrar mensajes breves, como confirmaciones de acci贸n, errores o alertas de 茅xito, de una manera discreta y no intrusiva.
La clave de un buen componente toaster radica en su capacidad para proporcionar informaci贸n relevante de manera r谩pida y legible, sin interrumpir la experiencia del usuario. Mediante animaciones suaves y opciones de personalizaci贸n, los desarrolladores pueden adaptar el estilo y comportamiento del toaster para que se integre con la apariencia general de la aplicaci贸n.
React Hot Toast es una librer铆a de React que permite mostrar mensajes emergentes. Es utilizado para mostrar mensajes de diferentes tipos como los que se usan para anunciar:
- Que un proceso se completo satisfactoriamente. (success)
- Que hay una alerta de alg煤n tipo. (warning)
- Que hay cierta informaci贸n relevante para comunicar. (notice)
- Que se gener贸 un error. (error)
驴C贸mo instalar React Hot Toast?
Para instalar toaster con npm utiliza la siguiente instrucci贸n.
pnpm add react-hot-toast
Integrar React Hot Toast al proyect
-
El componente
Toaster
que es parte de React Hot Toast debe de estar localizado en la parte superior del proyecto, en nuestro caso en src/pages/_app.tsx.import { ClerkProvider } from '@clerk/nextjs' import { type AppType } from 'next/app' import { Toaster } from 'react-hot-toast' import '~/styles/globals.css' import { api } from '~/utils/api' const MyApp: AppType = ({ Component, pageProps }) => { return ( <ClerkProvider {...pageProps}> <Toaster /> <Component {...pageProps} /> </ClerkProvider> ) } export default api.withTRPC(MyApp)
-
Ahora podemos actualizar la llamada al mutator dentro de src/pages/index.tsx para que cuando esta genere un error, mostremos tambi茅n un mensaje en utilizando toast.
import { toast } from 'react-hot-toast' // ... const CreatePostWizard = () => { // ... const { mutate, isLoading: isPosting } = api.posts.create.useMutation({ onSuccess: () => { setInput('') void ctx.posts.getAll.invalidate() }, onError: () => { toast.error('No se pudo publicar el post') }, }) // ... }
-
Podemos configurar la posici贸n en donde deseamos que el componente toaster se despliegue utilizando los props que este ofrece.
<Toaster position="bottom-center" />
-
Ahora para utilizar el error que dispara Zod al realizar la validaci贸n, podemos personalizar el mensaje de la respuesta para tomar el mensaje del error o definir uno si es que no existe.
const { mutate, isLoading: isPosting } = api.posts.create.useMutation({ onSuccess: () => { setInput('') void ctx.posts.getAll.invalidate() }, onError: (e) => { // obtener el error o mostrar uno por default const errorMessage = e.data?.zodError?.fieldErrors.content?.[0] ?? 'No se pudo crear el post' toast.error(errorMessage) }, })
Sin embargo al probar nos daremos cuenta que el mensaje mostrado esta en ingl茅s, y es el mensaje gen茅rico de la librer铆a zod.
-
Abre el archivo del router posts, ve a la secci贸n en donde se encuentra definido el input mediante zod y personaliza los mensajes de error para cada caso.
export const postsRouter = createTRPCRouter({ // ... create: privateProcedure .input( z.object({ content: z .string() .emoji('El contenido debe contener solo emojis') .min(1, 'Utiliza al menos un emoji') .max(280, 'Utiliza menos de 280 emojis'), }) ) .mutation(async ({ ctx, input }) => { const authorId = ctx.userId const { success } = await rateLimiter.limit(authorId) if (!success) { throw new TRPCError({ code: 'TOO_MANY_REQUESTS' }) } await ctx.prisma.post.create({ data: { content: input.content, authorId, }, }) }), })
-
Finalmente personalizamos el componente
CreatePostWizard
moviendo el estadoisPosting
al 谩rea en donde se muestra el bot贸n para alternar entre el despliegue de este y la precarga.{ isPosting ? ( <button disabled> <Loading /> </button> ) : ( <button onClick={() => mutate({ content: input })}>Post</button> ) }
Mediante el uso de toast podemos enviar mensajes emergentes y asi mejorar la experiencia del usuario. En esta lecci贸n hemos aprendido a echar mano de toast para notificar los posibles errores reportados por la librer铆a zod y un error default en su defecto.