Créer un système de messages toasts avec React

preview_player
Показать описание

Dans cette vidéo nous allons apprendre comment créer un système de messages "Toast" dans React.

00:00 Introduction
01:35 1ère approche, création du contexte
06:30 Inconvénient (rerendu)
06:50 2ème approche, avec une ref
11:40 Ajout de la durée
13:20 Ajout de l'animation
17:57 Optimisation du timer

Soutenez Grafikart:

Retrouvez Grafikart sur:
  1. Grafikart.fr
Рекомендации по теме
TUTO PHP - 0:41:17

TUTO PHP - Créer un Système de Messages Privés en PHP & MySQL

Créer un système 0:22:20

Créer un système de messages toasts avec React

Comment déchiffrer (presque) 0:13:25

Comment déchiffrer (presque) n'importe quel message codé ? 🔑🔓📜

System Design Interview 0:25:11

System Design Interview - Notification Service

Voici comment fonctionne 0:03:21

Voici comment fonctionne l'arnaque par SMS

Whatsapp System design 0:27:40

Whatsapp System design or software architecture

Mon système infaillible 0:13:00

Mon système infaillible pour répondre aux messages

How to create 0:15:06

How to create an accurate Chat Bot Response System in Python Tutorial (2021)

[ FRANÇAIS ] 1:21:49

[ FRANÇAIS ] Message 23 - Une Entrée Pleinement Accordée dans le Royaume Éternel de Notre Seigneur...

TOO MANY EMAILS? 0:13:16

TOO MANY EMAILS? Use THESE Proven Techniques | Outlook tips included

Système de récompense 0:03:08

Système de récompense et addiction

Corpus : Au 0:05:31

Corpus : Au cœur des organes. Le système nerveux

Transférer les données 0:00:48

Transférer les données de votre ancien iPhone vers un nouvel iPhone – Assistance Apple

How to Make 0:08:38

How to Make a UML Sequence Diagram

How To Build 2:01:48

How To Build A Full Stack Nested Comments System

Au coeur des 0:03:25

Au coeur des organes : La commande du mouvement

Tutoriel NodeJS : 0:38:43

Tutoriel NodeJS : Créer un bot Discord

Les émotions 0:16:49

Les émotions

Restauration du BIOS 0:02:28

Restauration du BIOS à l'aide d'une combinaison de touches pour les ordinateurs HP | HP Su...

Mon système pour 0:05:12

Mon système pour créer du contenu tous les jours sans m’épuiser.

Build & Integrate 0:29:52

Build & Integrate your own custom chatbot to a website (Python & JavaScript)

How to make 0:12:06

How to make a Discord verification system (2021)

COURS DE TERMINALE 0:15:19

COURS DE TERMINALE SPÉCIALITÉ SVT CHAP.14: LES RÉFLEXES - Bio Logique-

Create Simple Document 0:13:53

Create Simple Document Approval Flows using Power Automate & SharePoint

Комментарии
Автор

@grafikart Bonjour, j'espère que vous allez bien? Merci infiniment pour ce cours. Grâce à vous je comprend mieux comment intégrer des composants réutilisable dans un composant de rendu en utilisant Typescript pour typer dynamiquement les composants. Vous êtes vraiment impressionant, je vous remercie grandement. Prenez bien soin de vous.

mathieucalteau
Автор

MERCI pour tout le travail et le partage de connaissances

Green
Автор

Merci pour la vidéo, j'ai adopté la même approche que vous mais pour éviter les re-render causés par React Context j'ai adopté Redux Toolkit. Nous avons utilisé Mui 5 dans notre projet avec un système de Snackbar (Toast en Jargon Mui) global simple (il n'y pas eu besoin d'empilement). Mais ce que vous avez mis dans le code ressemble beaucoup ç l'implémentation en interne de librairie de Toast comme react-hot-toast

marouaniAymen
Автор

Il y'a un point que je n'ai pas compris c'est pour le CSS du toast-container, selon moi il fallait le mettre en position fixed mais si je fait ça je n'ai plus accès au onclick des éléments en dessous, et le pointer-event fait que je ne peux pas supprimer le toast au clique.

Es ce que je manque quelque chose ?

beatlesbob