How do I use a responsive library in React?

How do I use a responsive library in React?

You can use libraries like React Bootstrap or Material-UI. They provide responsive components out of the box.

Can you show me an example of using Material-UI for a responsive layout?

Sure! You can use the Grid component from Material-UI to create a responsive layout. Here's a simple example:

import Grid from '@mui/material/Grid';

function MyComponent() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={6} md={4}>
        <div>Item 1</div>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <div>Item 2</div>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <div>Item 3</div>
      </Grid>
    </Grid>
  );
}

What are the benefits of using a responsive library?

Responsive libraries save time and effort by providing pre-built components that adapt to different screen sizes, ensuring a consistent user experience.