How to create a beautiful toast message component using React and Styled Compone...
source link: https://dev.to/parmeetasija/how-to-create-a-beautiful-toast-message-component-using-react-and-styled-components-3e10
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Toast Notifications are yet another way to provide feedback to the user. They usually contain brief messages and sometimes get accompanied by CTAs as well.
This article aims to explain how we could use react-hot-toast and styled-components to create some beautiful-looking toast messages 😉
Project Initialisation
npx create-react-app toast-notification
Enter fullscreen mode
Exit fullscreen mode
Install Dependencies
- react-hot-toast for getting the toast notification functionality
- styled-components for styling needs
yarn add react-hot-toast styled-components
Enter fullscreen mode
Exit fullscreen mode
Constants
Default Title, Default Description & variants enum is stored in this file.
// path: src/components/toast-notification/data.js
export const variants = {
SUCCESS: "Success",
WARNING: "Warning",
QUESTION: "Question",
FAIL: "Fail",
};
export const DEFAULT_TITLE = {
Success: "Well done!",
Warning: "Warning!",
Question: "Hi there!",
Fail: "Oh snap!",
};
export const DEFAULT_DESCRIPTION = {
Success: "You successfully read this important message.",
Warning: "Sorry! There was a problem with your request.",
Question: "Do you have a problem? Just use this contact form.",
Fail: "Change a few things up and try submitting again.",
};
Enter fullscreen mode
Exit fullscreen mode
App Component
Form
& Toaster
component is called inside App component.
// path: src/App.js
// External
import { Toaster } from "react-hot-toast";
// Components
import Form from "./components/form";
// Styles
import { AppStyles } from "./styles";
const App = () => {
return (
<AppStyles>
<Form />
<Toaster position="bottom-left" gutter={56} />
</AppStyles>
);
};
export default App;
Enter fullscreen mode
Exit fullscreen mode
Toast Notification Component
Toast Notification Component contains the styles for Toast Notification.
// path: src/components/toast-notification/index.js
import React from "react";
// External
import toast from "react-hot-toast";
// Components
import CustomIcon from "../CustomIcon";
// Styles
import {
NotificationCard,
NotificationImage,
NotificationImageWrapper,
NotificationContent,
NotificationTitle,
NotificationDescription,
NotificationIconButton,
BubblesImage,
} from "../../styles";
const ToastNotification = ({
t,
bgColor,
icon,
bubbleImage,
title,
message,
}) => {
// handlers
const handleDismiss = () => {
toast.dismiss(t.id);
};
return (
<>
<NotificationImageWrapper>
<NotificationImage src={icon} alt="" role="presentation" />
</NotificationImageWrapper>
<NotificationCard bgColor={bgColor}>
<BubblesImage src={bubbleImage} alt="" role="presentation" />
<NotificationContent>
<NotificationTitle>{title}</NotificationTitle>
<NotificationDescription>{message}</NotificationDescription>
</NotificationContent>
<NotificationIconButton onClick={handleDismiss}>
<CustomIcon icon="times" />
</NotificationIconButton>
</NotificationCard>
</>
);
};
export default ToastNotification;
Enter fullscreen mode
Exit fullscreen mode
Form Component
This component contains the inputs used for testing out the component.
//path: src/components/form/index.js
import React, { useState, useEffect } from "react";
// External
import toast from "react-hot-toast";
// Components
import ToastNotification from "../toast-notification";
// Styles
import {
Button,
RadioButtonContainer,
RadioButtonInput,
OptionsContainer,
Container,
} from "../../styles";
// Image
import questionImage from "../../images/question.png";
import successImage from "../../images/success.png";
import warningImage from "../../images/warning.png";
import failImage from "../../images/fail.png";
import greenBubbles from "../../images/green-bubbles.png";
import redBubbles from "../../images/red-bubbles.png";
import blueBubbles from "../../images/blue-bubbles.png";
import yellowBubbles from "../../images/yellow-bubbles.png";
// Constants
import {
variants,
DEFAULT_TITLE,
DEFAULT_DESCRIPTION,
} from "../ToastNotification/data";
const Form = () => {
const [currentVariant, setCurrentVariant] = useState(variants.SUCCESS);
const [title, setTitle] = useState(DEFAULT_TITLE.SUCCESS);
const [message, setMessage] = useState(DEFAULT_DESCRIPTION.SUCCESS);
// change title and message when notification variant changes
useEffect(() => {
setTitle(DEFAULT_TITLE[currentVariant]);
setMessage(DEFAULT_DESCRIPTION[currentVariant]);
}, [currentVariant]);
// show appropriate toast notification as per the variant
const showToastNotification = () => {
if (currentVariant === variants.SUCCESS) {
toast.custom(t => (
<ToastNotification
t={t}
icon={successImage}
bubbleImage={greenBubbles}
bgColor="#76bf4c"
title={title}
message={message}
/>
));
}
if (currentVariant === variants.QUESTION) {
toast.custom(t => (
<ToastNotification
t={t}
icon={questionImage}
bubbleImage={blueBubbles}
bgColor="#B8B5FF"
title={title}
message={message}
/>
));
}
if (currentVariant === variants.WARNING) {
toast.custom(t => (
<ToastNotification
t={t}
icon={warningImage}
bubbleImage={yellowBubbles}
bgColor="#FCA652"
title={title}
message={message}
/>
));
}
if (currentVariant === variants.FAIL) {
toast.custom(t => (
<ToastNotification
t={t}
icon={failImage}
bubbleImage={redBubbles}
bgColor="#F05454"
title={title}
message={message}
/>
));
}
};
// handlers
const handleVariantChange = e => {
setCurrentVariant(e.target.name);
};
const handleTitleChange = e => {
setTitle(e.target.value);
};
const handleMessageChange = e => {
setMessage(e.target.value);
};
return (
<>
<OptionsContainer>
{Object.values(variants).map(variant => (
<RadioButtonContainer key={variant}>
<RadioButtonInput
type="radio"
id={variant}
name={variant}
checked={currentVariant === variant}
onChange={handleVariantChange}
/>
<label htmlFor={variant}>{variant}</label>
</RadioButtonContainer>
))}
</OptionsContainer>
<br />
<Container>
<label htmlFor="title-field">Title</label>
<input
id="title-field"
type="text"
value={title}
onChange={handleTitleChange}
/>
<label htmlFor="message-field">Message</label>
<textarea
id="message-field"
rows="6"
value={message}
onChange={handleMessageChange}
></textarea>
</Container>
<Button
isSelected={!(!title || !message)}
onClick={showToastNotification}
>
Show Toast!
</Button>
</>
);
};
export default Form;
Enter fullscreen mode
Exit fullscreen mode
Conclusion
And there we have it, we have got elegant-looking alert notification implemented. The Code is available on Github. Would love to hear your valuable feedback in the comments down below.
See you guys 👋🏻 in the next article of this Component series!
Happy coding & Stay safe! ✨
Follow me on Twitter & Instagram for more!
This article can also be read on my website
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK