DEV Community

Cover image for Modern Testimonials in React Tutorial
aryaziai
aryaziai

Posted on • Edited on

21 4

Modern Testimonials in React Tutorial

Update: I wrote this when my CSS skills weren't too great, so please avoid !important for best practice :)

In this blog I will be sharing a short tutorial on how to add modern testimonials to your ReactJS project. When I first started searching the web for a clean solution, I was overwhelmed by the different approaches to accomplishing this. Eventually, I found a customizable carousel component for React, and used CSS to give it a nice look and feel.

React Configuration

1) Create React App


 npx create-react-app my-app
cd my-app
npm start 

Enter fullscreen mode Exit fullscreen mode

2) Install react-responsive-carousel


 npm i react-responsive-carousel 

Enter fullscreen mode Exit fullscreen mode

3) Create Testimonals.js


 javascript
import React, { Component } from "react";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';

export default class Testimonials extends Component {
  render() {
    return (
      <Carousel>
        <div>
          <img src="assets/1.jpeg" />
          <p className="legend">Legend 1</p>
        </div>
        <div>
          <img src="assets/2.jpeg" />
          <p className="legend">Legend 2</p>
        </div>
        <div>
          <img src="assets/3.jpeg" />
          <p className="legend">Legend 3</p>
        </div>
      </Carousel>
    );
  }
}


Enter fullscreen mode Exit fullscreen mode

4) Import Testimonials into App.js


 javascript
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Testimonials from "./Testimonials.js";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Testimonials</h1>
        <Testimonials />
      </header>
    </div>
  );
}

export default App;


Enter fullscreen mode Exit fullscreen mode

What You Should See Now:

Alt Text


Now Let's Customize!

1. Updating Testimonials

To help set you up with a nice template, here is an updated Testimonials.js file that I'm borrowing from one of my projects.


 javascript
import React, { Component } from "react";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";

export default class Testimonials extends Component {
  render() {
    return (
      <Carousel
        showArrows={true}
        infiniteLoop={true}
        showThumbs={false}
        showStatus={false}
        autoPlay={true}
        interval={6100}
      >
        <div>
          <img src="/images/shirley.png" />
          <div className="myCarousel">
            <h3>Shirley Fultz</h3>
            <h4>Designer</h4>
            <p>
              It's freeing to be able to catch up on customized news and not be
              distracted by a social media element on the same site
            </p>
          </div>
        </div>

        <div>
          <img src="/images/daniel.png" />
          <div className="myCarousel">
            <h3>Daniel Keystone</h3>
            <h4>Designer</h4>
            <p>
              The simple and intuitive design makes it easy for me use. I highly
              recommend Fetch to my peers.
            </p>
          </div>
        </div>

        <div>
          <img src="/images/theo.png" />
          <div className="myCarousel">
            <h3>Theo Sorel</h3>
            <h4>Designer</h4>
            <p>
              I enjoy catching up with Fetch on my laptop, or on my phone when
              I'm on the go!
            </p>
          </div>
        </div>
      </Carousel>
    );
  }
}


Enter fullscreen mode Exit fullscreen mode

2. Updating Images

1) Create an images folder inside the "public" folder.

2) Add three images. I've named my images: shirley, daniel, and theo.



3) Updating CSS


 css
.carousel-root {
  width: 64% !important;
  margin: auto !important;
  margin-top: 3% !important;
}

.carousel .slide {
  background: #fff !important;
  color: black;
  height: 100%;
}

.carousel .slide img {
  width: 139px !important;
  border-radius: 50%;
}

.myCarousel {
  background: #fafafa;
  margin-top: -6%;
  width: 54%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 6%;
  padding-bottom: 8%;
  padding-left: 5%;
  padding-right: 5%;
  border: 1px solid #ddd;
  height: 286px;
}

.carousel .control-dots {
  padding-left: 5px !important;
  outline: 0;
  bottom: 5% !important;
}

.myCarousel h3 {
  color: #222;
  font-weight: 100;
  letter-spacing: 0.2px;
  margin-bottom: 4px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 17px;
}

.myCarousel h4 {
  text-transform: uppercase;
  margin-top: 0;
  padding-top: 0;
  font-weight: 500;
  color: #787878;
  font-size: 14px;
}

.myCarousel p {
  font-weight: 100 !important;
  line-height: 29px !important;
  color: #222;
  font-size: 15px;
  font-family: sans-serif;
  max-height: 67px;
}

.myCarousel p:before {
  content: "“";
  color: #aaa;
  font-size: 26px;
  font-family: monospace;
  font-weight: 100;
}

.myCarousel p:after {
  content: "”";
  color: #aaa;
  font-size: 26px;
  font-family: monospace;
  font-weight: 100;
  line-height: 0;
}

.carousel .control-dots .dot {
  box-shadow: none !important;
  background: #454545 !important;
  outline: 0;
}

.carousel.carousel-slider .control-arrow {
  background: #000 !important;
  height: 50px !important;
  position: absolute;
  top: 35% !important;
}

.App {
  text-align: center;
}

@media only screen and (max-width: 934px) {
  .carousel-root {
    outline: 0;
    width: 93% !important;
    margin: auto !important;
  }

  .carousel.carousel-slider .control-arrow {
    display: none !important;
  }
  .myCarousel {
    background: #fafafa;
    margin-top: -9%;
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 8%;
    padding-bottom: 12.5%;
    padding-left: 5%;
    padding-right: 5%;
    border: 1px solid #ddd;
    height: 269px;
  }

  .carousel .slide img {
    width: 24% !important;
    border-radius: 50%;
  }
}


Enter fullscreen mode Exit fullscreen mode

Important: The CSS becomes a bit hacky because we are importing pre-defined styles from "react-responsive-carousel/lib/styles/carousel.min.css". If you have the time, you can sort out the conflicting selectors and rules.

Note: I've removed the arrows in viewport screens below 935px given the limited real-estate.

End Result

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (6)

Collapse
 
srshohan profile image
Shohanur Rahman

Thanks for this...it's help me a lot

Collapse
 
rahulmanojt profile image
Rahul T

Great Work, Helped a lot !!

Collapse
 
bilalmohib profile image
Muhammad Bilal Mohib-ul-Nabi

Great Work Thank you

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
davegizmo profile image
David Bolu

Thanks, it was a great addition to my app

Collapse
 
bilalmohib profile image
Muhammad Bilal Mohib-ul-Nabi

You have done a great work.Keep it up.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay