How To Create a Responsive Like Button in ReactJS?

The responsive like button is an important feature in many web applications, enabling user engagement with content. When implementing this feature, making it both functional and responsive ensures a smooth user experience. In this article, we'll explore how to create a responsive like button in ReactJS, to ensure the button works well across devices and screen sizes.

Steps to Create a Responsive Like Button in ReactJS

Step 1: Set Up React Application

Before you create the like button, ensure that you have a React application set up. If not, you can use the following command to create one:

npx create-react-app react-gfg
cd react-gfg

Folder Structure

Dependencies

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Step 2: Create the Like Button Component

Create a new component, LikeButton.js. This component will handle the button’s state and responsiveness.

//LikeButton.js

import React, { useState } from 'react';

const LikeButton = () => {
    // State to keep track of the like status
    const [liked, setLiked] = useState(false);

    // Toggle like status
    const toggleLike = () => {
        setLiked(!liked);
    };

    return (
        <button
            onClick={toggleLike}
            className={`like-button ${liked ? 'liked' : ''}`}
        >
            {liked ? '❤️ Liked' : '♡ Like'}
        </button>
    );
};

export default LikeButton;

Step 3: Add Responsive Styling

Next, you need to add responsive styling for the like button. You can do this using CSS. Create a LikeButton.css file and add the following styles:

/* LikeButton.css */

.like-button {
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    background-color: white;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.like-button:hover {
    background-color: #f0f0f0;
}

.like-button.liked {
    color: red;
}

@media (max-width: 768px) {
    .like-button {
        font-size: 16px;
        padding: 8px 15px;
    }
}

@media (max-width: 480px) {
    .like-button {
        font-size: 14px;
        padding: 6px 12px;
    }
}

Step 4: Integrate the component is your App.js file

//App.js

import React from 'react'
import LikeButton from './LikeButton'

const App = () => {
  return <LikeButton />
}

export default App

To start the application run the following command.

npm start

Output