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

Create Zoom Transition Animations in React and Framer Motion: A How-To Guide

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Build a Toast Message Component via React and Styled Components with Ease

A Simple Guide for CSS Animations

Here's How You can Animate React with Framer Motion

Animations in Browser

Create Zoom Transition Animations in React and Framer Motion: A How-To Guide

Creating CSS3 Animated Backgrounds From Scratch

Build a Toast Message Component via React and Styled Components with Ease

A Simple Guide for CSS Animations

Here's How You can Animate React with Framer Motion

Animations in Browser

Create Zoom Transition Animations in React and Framer Motion: A How-To Guide

Creating CSS3 Animated Backgrounds From Scratch

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps