react-fullscreen-image

0.0.3 • Public • Published

React Fullscreen Image

🔲

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

demo

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.

Usage

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 = [
  'https://unsplash.com/photos/Bkci_8qcdvQ',
  'https://unsplash.com/photos/hS46bsAASwQ',
  'https://unsplash.com/photos/2VDa8bnLM8c',
  'https://unsplash.com/photos/_LuLiJc1cdo',
  'https://unsplash.com/photos/1Z2niiBPg5A',
  'https://unsplash.com/photos/pHANr-CpbYM',
  'https://unsplash.com/photos/pQMM63GE7fo',
  'https://unsplash.com/photos/2VDa8bnLM8c',
  'https://unsplash.com/photos/MBkQKiH14ng',
]
 
export default function App() {
  return (
    <ImageGroup>
      <ul className="images">
        {images.map(i => (
          <li key={i}>
            <Image
              src={i}
              alt="nature"
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                height: '100%',
                width: '100%',
                objectFit: 'cover',
              }}
            />
          </li>
        ))}
      </ul>
    </ImageGroup>
  )
}

Installation

git clone https://github.com/timc1/react-fullscreen-image.git
 
cd react-fullscreen-image/example
 
yarn install
 
yarn start

Package Sidebar

Install

npm i react-fullscreen-image

Weekly Downloads

251

Version

0.0.3

License

MIT

Unpacked Size

19.5 MB

Total Files

42

Last publish

Collaborators

  • timcchang