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: over 1 year 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 (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-04-29T03:39:28.000Z (about 5 years ago)
- Last Synced: 2025-03-18T10:21:38.316Z (over 1 year ago)
- Topics: animation, css, dom, hooks, javascript, react
- Language: TypeScript
- Homepage:
- Size: 17.9 MB
- Stars: 35
- Watchers: 2
- Forks: 8
- 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
```