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 :

const [activeId, setActiveId] = React.useState<number>(1);

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

{data.map((card) => (
<div
  key={card.id}
  className={`panel ${activeId === card.id ? "active" : ""}`}
  onClick={() => onClick(card.id)}
  style={{ backgroundImage: `url(${card.url})` }}
>
  <h3>{card.title}</h3>
</div>
))}

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

const onClick = (id: number) => setActiveId(id);

Then, type the code below in style.css

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

transition: flex 0.7s ease-in;

2. This is the flex in the inactive card

flex: 0.5;

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

flex: 5

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

This is the final result :

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

Thanks for reading!