Create Expanding Cards Component with React & TypeScript

Expanding Cards

I have reimplemented Expanding Cards created by Brad Traversy using React and TypeScript. I want to explain how to create Expanding Card component in this article.

Firstly, create the ExpandingCards folder, then create an index.tsx and style.css file inside that folder.

In the index.tsx file type this code :

  1. The code below is used to keep the active card id :

2. The code below is used to looping the data :

3. Then, use this method to change the active card

Then, type the code below in style.css

  1. This is the style for the animation when you change the active card

2. This is the flex in the inactive card

3. Then, it will be 5 for the active card

You can pass your data, to the component like this :

This is the final result :

https://expanding-cards-react.stackblitz.io/

Thanks for reading!

I’m a Full Stack Typescript Engineer, I usually work with react native, react js, and NestJS