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 for integrating Lottie animations React Lottie for micro-interactions Framer Motion for styling needs Styled Components 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 . Simply select your favorite animations and place them under the folder. jkkim0124 src/lotties Component Breakdown App Component Call the Emoji Feedback component along with the necessary state props. // 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. 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. // 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. // 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 is available on Github. Would love to hear your valuable feedback in the comments down below. code See you guys 👋🏻  in the next article of this Component series! Happy coding & Stay safe! ✨ Follow me on & for more! Twitter Instagram This article can also be read here: . https://www.parmeetasija.com/blog/how-to-make-a-feedback-component-to-seamlessly-collect-reviews-in-reactjs/

Instagram

Twitter

2022 - HackerNoon Contributor of the Year - Css

2022 - HackerNoon Contributor of the Year - Typescript

Do you need a website? Let's Connect!

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Make an Animated Customer Feedback Component in React.JS

Too Long; Didn't Read

Companies Mentioned

Parmeet Singh Asija

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Make an Animated Customer Feedback Component in React.JS

Too Long; Didn't Read

Companies Mentioned

Parmeet Singh Asija

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES