DEV Community: Parmeet Singh Asija

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

Parmeet Singh Asija — Sun, 19 Dec 2021 17:27:18 +0000

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

Install Dependencies

react-hot-toast for getting the toast notification functionality
styled-components for styling needs

yarn add react-hot-toast styled-components

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.",
};

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;

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;

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;

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

How to create a zoom transition animation effect using React & Framer Motion?

Parmeet Singh Asija — Fri, 01 Oct 2021 20:49:47 +0000

Interruption in the user's experience while navigating between pages can often lead to them going off the website. We could improve on that by adding page transitions in our web application which could lead to an uninterrupted experience for the user.

This article aims to explain, how we could create one such page transition animation for a gallery web app using React & Framer Motion. So let's get started with it then! 😉

Project Initialisation

npx create-react-app gallery

Install Dependencies

Framer Motion for transition animation
Styled Components for styling needs
Polished for style helper functions
React Use for utility hooks

yarn add framer-motion styled-components polished react-use

Images Data Structure

All the images are stored in an array of the following data structure:

{
   "name": string,
   "location": string,
   "variant": string,
   "creator": {
     "name": string,
     "avatar": url_string
   }
}

App Component

ImageGrid component is called inside App component.

// path:src/App.js

import { useState } from "react";

// External
import styled from "styled-components";
import { motion } from "framer-motion";

// Components
import ImageGrid from "./components/image-grid";

// Styles
import { Container, Heading } from "./styles/globalStyles";

const AppStyles = styled(motion.div)`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8ebe2;
`;

const App = () => {
  // index of the image being shown
  const [selectedImage, setSelectedImage] = useState(-1);

  return (
    <AppStyles>
      <Container>
        <Heading>Explore 🇮🇳</Heading>
        <ImageGrid
          selectedImage={selectedImage}
          setSelectedImage={setSelectedImage}
        />
      </Container>
    </AppStyles>
  );
};

export default App;

Image Grid Component

This page shows all the images in a masonry grid layout.

// path:src/components/image-grid/index.js

import { useState, useEffect } from "react";

// External
import { AnimateSharedLayout } from "framer-motion";
import { useLockBodyScroll } from "react-use";

// Components
import SinglePicture from "./single-picture";

// Styles
import { Grid } from "./styles";

// Data
import data from "../../data.json";

const ImageGrid = ({ selectedImage, setSelectedImage }) => {
  // helps in preventing body from scrolling when an image page is being shown
  const [isScrollLocked, setScrollLocked] = useState(false);

  useLockBodyScroll(isScrollLocked);

  useEffect(() => {
    if (selectedImage !== -1) {
      setScrollLocked(true);
    } else {
      setScrollLocked(false);
    }
  }, [selectedImage]);

  return (
    <AnimateSharedLayout>
      <Grid>
        {data.images.map((data, index) => (
          <SinglePicture
            key={`${data.name}-${index}`}
            isSelected={selectedImage === index}
            index={index}
            setSelectedImage={setSelectedImage}
            data={data}
          />
        ))}
      </Grid>
    </AnimateSharedLayout>
  );
};

export default ImageGrid;

Single Picture

This page shows a single image with some image metadata.

// path: src/components/image-grid/single-picture.jsx

// Styles
import { Flex } from "../../styles/globalStyles";
import {
  Image,
  SinglePictureContainer,
  Back,
  InfoCard,
  Name,
  PhotographerName,
  Avatar,
  Location,
} from "./styles";

// Assets
import images from "../../images";
import { CloseIcon } from "../../images/CustomIcons";

// animation config and variants
const spring = {
  type: "spring",
  stiffness: 500,
  damping: 30,
};

const backVariants = {
  initial: {
    opacity: 0,
    y: -20,
  },
  animate: { opacity: 1, y: 0 },
};

const cardVariants = {
  initial: {
    opacity: 0,
    y: 100,
    x: "-50%",
  },
  animate: { opacity: 1, y: 0, x: "-50%" },
};

const SinglePicture = ({
  isSelected,
  setSelectedImage,
  index,
  data: { creator, location, name, variant },
}) => {
  const goBack = () => {
    setSelectedImage(-1);
  };

  return (
    <SinglePictureContainer
      isSelected={isSelected}
      layoutId={`card-container--index-${index}`}
      transition={spring}
      variant={variant}
    >
      {isSelected && (
        <Back
          onClick={goBack}
          initial="initial"
          animate="animate"
          exit="initial"
          transition={{ delay: 0.2, duration: 0.5 }}
          variants={backVariants}
        >
          <CloseIcon />
        </Back>
      )}
      <Image
        src={images[name]}
        alt={name}
        onClick={() => {
          setSelectedImage(index);
        }}
        isExpanded={isSelected}
        layoutId={`card-image--index-${index}`}
      />
      {isSelected && (
        <InfoCard
          initial="initial"
          animate="animate"
          exit="initial"
          transition={{ delay: 0.1, duration: 0.5 }}
          variants={cardVariants}
        >
          <Location>{location}</Location>
          <Name>{name}</Name>
          <Flex>
            <Avatar
              image={
                !!creator.avatar
                  ? `${creator.avatar}?q=10&w=50`
                  : images.avatarFallback
              }
            />
            <PhotographerName>{creator.name}</PhotographerName>
          </Flex>
        </InfoCard>
      )}
    </SinglePictureContainer>
  );
};

export default SinglePicture;

Conclusion

And there we have it, the gallery page transition animation is ready. 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

How to make a Feedback Component to seamlessly collect reviews in React.JS

Parmeet Singh Asija — Fri, 17 Sep 2021 18:08:56 +0000

For a business, customer feedback happens to be one of the most reliable ways to know how they are doing. As Developer, we should try and make this process as intuitive and simple as possible.

This article aims to explain, how we could develop a customer feedback component using React, Lottie Web & Framer Motion. So let's get started with it then! 😉

Project Initialization

npx create-react-app emoji-feedback

Install Dependencies

React Lottie for integrating Lottie animations
Framer Motion for micro-interactions
Styled Components for styling needs

yarn add react-lottie framer-motion styled-components

Animated Emojis

To get the emojis to animate, we have 2 options:

Animated emoji pack (Mostly Paid)
Lottie Animations (Free & Paid)

I went with the 2nd option for this one. The animations used in this component are by jkkim0124. Simply select your favorite animations and place them under the src/lotties folder.

Component Breakdown

App Component

Call the Emoji Feedback component along with the necessary state props.

// path: src/App.js

// React 
import { useState } from "react";

// External
import styled from "styled-components";

// Components
import EmojiFeedback from "./components/EmojiFeedback";

const AppStyles = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f8ebe2;
`;

const App = () => {
  const [activeReaction, setActiveReaction] = useState("");
  return (
    <AppStyles>
      <EmojiFeedback
        activeReaction={activeReaction}
        setActiveReaction={setActiveReaction}
      />
    </AppStyles>
  );
};

export default App;

Constants

Declare an array containing strings of the various supported reactions.

// path: src/components/EmojiFeedback/data.js

const reactions = ["Aweful", "Bad", "Ok Ok", "Good", "Amazing"];

export { reactions };

Emoji Feedback Component

Loop through the reactions and then call the Emoji component for every reaction.

// path: src/components/EmojiFeedback/index.jsx

// External
import styled from "styled-components";

// Components
import Emoji from "./Emoji";
import { Flex } from "../../styles/globalStyles";

// Reactions array
import { reactions } from "./data";

const Card = styled.div`
  width: 800px;
  height: 500px;
  background-color: #fff;
  border-radius: 33px;
  padding: 44px 48px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

  @media only screen and (max-width: 930px) {
    width: 80%;
  }
`;

const Heading = styled.h2`
  font-size: 42px;
  font-weight: bold;
  margin: 0;
  color: #000;
  font-family: Plus Jakarta Sans Bold;
`;

const Content = styled(Flex)`
  height: 452px;
  position: relative;
`;

const Emojis = styled(Flex)`
  top: 30%;
`;

const Button = styled.button`
  background-color: ${props => (props.isSelected ? "#000" : "#ccc")};
  cursor: ${props => (props.isSelected ? "pointer" : "not-allowed")};
  border: none;
  color: #fff;
  padding: 19.5px 107.3px;
  border-radius: 19px;
  font-family: Plus Jakarta Sans Medium;
  font-size: 24px;
  user-select: none;
  position: absolute;
  bottom: 0;
`;

const EmojiFeedback = ({ activeReaction, setActiveReaction }) => {
  return (
    <Card>
      <Heading>How was your experience?</Heading>
      <Content column>
        <Emojis>
          {reactions.map(reaction => (
            <Emoji
              reaction={reaction}
              key={reaction}
              isSelected={activeReaction === reaction}
              setActiveReaction={setActiveReaction}
            />
          ))}
        </Emojis>
        <Button isSelected={!!activeReaction}>Submit</Button>
      </Content>
    </Card>
  );
};

export default EmojiFeedback;

Emoji Component

The emoji component is being used to render a single emoji.

// path: src/components/EmojiFeedback/Emoji.jsx

// External
import Lottie from "react-lottie";
import { motion } from "framer-motion";
import styled from "styled-components";

// Helper for handling lottie animation data
import selectAnimationData from "../../lotties";

const EmojiWrapper = styled(motion.div)`
  cursor: pointer;
  margin: 0 12px;
  position: relative;
`;

const EmojiLabel = styled.p`
  text-align: center;
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Plus Jakarta Sans Bold;
  font-size: 16px;
  user-select: none;
`;

// Constants for emoji's scale during different states
const NORMAL_SCALE = 1;
const HOVERED_SCALE = 1.3;
const SELECTED_SCALE = 1.5;

const Emoji = ({ reaction, isSelected, setActiveReaction }) => {
  // Initialize the animation options as per the reaction
  const animationOptions = {
    loop: true,
    autoplay: false,
    animationData: selectAnimationData(reaction),
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };

  // Update state on the click of reaction
  const handleClick = () => {
    if (isSelected) {
      setActiveReaction("");
    } else {
      setActiveReaction(reaction);
    }
  };

  return (
    <EmojiWrapper
      whileHover={{
        scale: isSelected ? SELECTED_SCALE : HOVERED_SCALE,
      }}
      animate={{
        scale: isSelected ? SELECTED_SCALE : NORMAL_SCALE,
      }}
      onClick={handleClick}
    >
      <Lottie
        options={animationOptions}
        height={100}
        width="80%"
        isStopped={!isSelected}
        isClickToPauseDisabled
      />
      {isSelected && <EmojiLabel>{reaction}</EmojiLabel>}
    </EmojiWrapper>
  );
};

export default Emoji;

Conclusion

And there we have it, the emoji feedback component is ready. 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!