Skip to content
An accessible, fast, and snappy fullscreen React image viewer.
Branch: master
Clone or download
Latest commit 6ae80b5 Apr 4, 2019

React Fullscreen Image


A simple, fast, and beautiful fullscreen React image viewer using CSS transforms & opacity.


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.

A live demo can be viewed on CodeSandbox!


  • 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.


React Fullscreen Image uses compound components. All <Image /> components nested within an <ImageGroup /> will be navigatable when in fullscreen mode.

import { ImageGroup, Image } from 'react-fullscreen-image'

const images = [

export default function App() {
  return (
      <ul className="images">
        { => (
          <li key={i}>


git clone

cd react-fullscreen-image/example

yarn install

yarn start
You can’t perform that action at this time.