Skip to main content
Deconstructing toasts

Deconstructing toasts

IntroInitial setupTriggering the toastUsing CSSTransitionA simple toast componentToast SCSS ModulesTesting it outResetting our timerUsing useRefPutting it all togetherWrapping upIntroToast messages are one way to communicate to a user that something that changed. Usually these messages display for a few seconds and disappear on their own. Some configurable options could be:Intent (informational, warning, error, etc)Dismissible (auto disappear or click to control)Position (which area of the screen to display the toast)Duration (how long the message appears)Content (message, details, image)When displaying a toast message, we typically want the message to animate in a certain way. To do this, there are a few libraries that can help with this so that the toast still animates in even if it’s mounting/dismounting.But what if the section for the toast message is already in the DOM and we want to recreate this logic ourselves?Initial setupLet’s say we want to trigger our toast when the user has clicked a button to submit a form. We’ll create a function called submitForm that will be triggered when our button is clicked.import React from ‘react’ export default function App() { return submitForm()}Complete application } Now that we’ve done that, let’s set up our submitForm function.import React, { useState, useCallback } from ‘react’ export default function App() { const [toast, setToast] = useState(false) return submitForm()}Complete application } Generally the first thing you want to do is determine what state logic you need. In our case, we want to store a state that captures if the toast is showing up or not.Our useState logic is saying that upon component render, this state is false. On its own, this doesn’t mean anything but we’ll use this boolean to determine if the toast should be visible.Triggering the toastimport React, { useState, useCallback } from ‘react’ export default function App() { const [toast, setToast] = useState(false) const submitForm = useCallback(() ={ setToast(true) setTimeout(() ={ setToast(false) }, 1000) }, []) } One thing to notice is that we are using useCallback here to reference a few methods. Because I want this component to disappear after a few seconds, I want to:Set my toast state to falseUse setTimeout, which is a method that does something after a given amount of time that I specify.Using CSSTransitionNow, we could just use CSSTransition to render our toast, but the point of this post is learning how to do some of this logic ourselves! If we were to use this library, we would do something like this, and add the corresponding toast-* classes. A simple toast componentLet’s make a few assumptions and simplify the component so all we need to worry about is passing in a message prop.const ToastContext = createContext(null) const Toast = ({ message }) ={ const toast = useContext(ToastContext) return ( {message} ) } This className logic is saying that when my toast state = true,  » Read More

Like to keep reading?

This article first appeared on kellyharrop.com. If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

#Dev
How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?

#All

Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.