DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to create a beautiful toast message component using React and Styled Components?
Parmeet Singh Asija
Parmeet Singh Asija

Posted on • Originally published at parmeetasija.com

How to create a beautiful toast message component using React and Styled Components?

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

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

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›