You've got a list of images that you want to allow users to click and expand into fullscreen mode.

React Fullscreen Image is a tiny library to render images that animate to fullscreen view when clicked.

Features

• Only animates transform and opacity properties.
• Keyboard event handlers (escape key, left/right arrow navigation).
• Handles outer click — anywhere outside of image when clicked will zoom image to its original position.
• Scrolling (with requestAnimationFrame) to a set boundary will zoom image to its original position.

import { ImageGroup, Image } from '@africasokoni/react-image-viewer';

const images = [
  'some_image_url',
  'some_image_url',
  'some_image_url',
  'some_image_url',
];

export default function App() {
  return (
    <ImageGroup>
      <ul className='images'>
        {images.map((i) => (
          <li key={i}>
            <Image src={i} alt='nature' />
          </li>
        ))}
      </ul>
    </ImageGroup>
  );
}

Installation

git clone https://github.com/sokoni-online/react-image-viewer.git

cd react-fullscreen-image/example

yarn install

yarn start