how to display full screen on click with reactjs bootstrap

Question

Iam using bootstrap styling and i want to get the image with full screen when I click on the image.

this is the code .

<Card style={{ width: '18rem' }}>
    <Card.Img variant="top" src={images} style={{marginLeft:10,marginTop:20, width: '15rem',height: '15rem' }}/>
    <Card.Body>
      <Card.Title>{name}</Card.Title>
    </Card.Body>
    <ListGroup className="list-group-flush">
      <ListGroup.Item>{number}</ListGroup.Item>
      <ListGroup.Item>{type}</ListGroup.Item>
    </ListGroup>
    <Card.Body>
      <Button variant="primary">Go somewhere</Button>
    </Card.Body>
  </Card>

Answer 1

To display the image in full-screen mode when the user clicks on it, you can use the Bootstrap Modal component.

import { useState } from 'react';
import { Card, Button, Modal } from 'react-bootstrap';

function ImageCard({ name, number, type, image }) {
  const [showModal, setShowModal] = useState(false);

  const handleModalShow = () => setShowModal(true);
  const handleModalClose = () => setShowModal(false);

  return (
    <>
      <Card style={{ width: '18rem' }}>
        <Card.Img
          variant="top"
          src={image}
          style={{ marginLeft: 10, marginTop: 20, width: '15rem', height: '15rem' }}
          onClick={handleModalShow}
        />
        <Card.Body>
          <Card.Title>{name}</Card.Title>
        </Card.Body>
        <ListGroup className="list-group-flush">
          <ListGroup.Item>{number}</ListGroup.Item>
          <ListGroup.Item>{type}</ListGroup.Item>
        </ListGroup>
        <Card.Body>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>

      <Modal show={showModal} onHide={handleModalClose} size="lg">
        <Modal.Header closeButton></Modal.Header>
        <Modal.Body>
          <img src={image} alt={name} style={{ width: '100%', height: 'auto' }} />
        </Modal.Body>
      </Modal>
    </>
  );
}