How to open card on click or hover?

Question

After clicking on the Set tag/status on left, I want to open a card like this on the right.

What is the good solution for it in React? Regular CSS or material ui or react-bootstrap will be fine.

Answer 1

it is a nice question but depends on how much time you have and how much determinate you are.

Showing some solutions related about you asked.

---

Regular CSS You will need to use Javascript to support you on the hide/show logic using CSS and JS tricks and proprieties.

It is more complicated because there is no pattern until you create yours or use someone's but on the other hand you can practice more Vanilla JS and improve your CSS skills.

---

Material UI It is a good option if you want to use robust components to support you with customization and style patterns.

It has a learning scale to make the usage easier but after that it has a good flow to use its components and customize them.

Some tips if you choose Material UI, use its theme override to put your own theme into all Material UI stuff using the lib styled-components and try not to customize all components using only CSS, use props following the docs, it will be scalable.

---

react-bootstrap If you are used to use bootstrap with HTML, CSS and JS I do recomend to use it because it will be faster to you to build it, but if not I recommend you to go with Material UI.

But why Material UI and not react-bootstrap, because if you have never worked with anyone so learning about Material UI using React you be more advantageous considering that its components are good to use and on almost every case them solve the problem.

---

Final These are what I think about those options you gave.

I really like Material UI and what they build, the components are so easy to understand and customize using those props or classes. The lib has some integrations and tools to help on style guide creation using override patterns.

If you have never tried it, I recommend you to do that and use that.