Sometimes, we want to add ripple effect when clicking a card in Material UI and JavaScript.

In this article, we’ll look at how to add ripple effect when clicking a card in Material UI and JavaScript.

How to add ripple effect when clicking a card in Material UI and JavaScript?

To add ripple effect when clicking a card in Material UI and JavaScript, we can add a card with the Card component.

For instance, we write:

import React from "react";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardContent from "@material-ui/core/CardContent";

export default function App() {
  return (
    <div>
      <Card>
        <CardActionArea>
          <CardContent>hello world</CardContent>
        </CardActionArea>
      </Card>
    </div>
  );
}

We add the Card, CardActionArea and CardContent components to add a card onto the page.

As a result, when we hover over the card, we should see the ripple effect displaying.

Conclusion

To add ripple effect when clicking a card in Material UI and JavaScript, we can add a card with the Card component.