https://github.com/timc1/react-fullscreen-image

An accessible, fast, and snappy fullscreen React image viewer.
https://github.com/timc1/react-fullscreen-image

animation css dom hooks javascript react

Last synced: 2 months ago
JSON representation

An accessible, fast, and snappy fullscreen React image viewer.

• Host: GitHub
• URL: https://github.com/timc1/react-fullscreen-image
• Owner: timc1
• License: mit
• Created: 2019-03-31T00:32:50.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2021-04-29T03:39:28.000Z (over 3 years ago)
• Last Synced: 2024-10-14T18:49:24.084Z (3 months ago)
• Topics: animation, css, dom, hooks, javascript, react
• Language: TypeScript
• Homepage:
• Size: 17.9 MB
• Stars: 35
• Watchers: 2
• Forks: 9
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  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](https://codesandbox.io/s/o9m59jj3oq)!

## 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](https://kentcdodds.com/blog/compound-components-with-react-hooks). All `` components nested within an `` will be navigatable when in fullscreen mode.

```jsx

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

const images = [

  'some_image_url',

  'some_image_url',

  'some_image_url',

  'some_image_url'

]

export default function App() {

  return (

    

      


        {images.map(i => (

          


            

          

        ))}

      

    

  )

}

```


## Installation

```jsx

git clone https://github.com/timc1/react-fullscreen-image.git

cd react-fullscreen-image/example

yarn install

yarn start

```