An accessible, fast, and snappy fullscreen React image viewer.
MIT License
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!
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 = [
'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>
)
}
git clone https://github.com/timc1/react-fullscreen-image.git
cd react-fullscreen-image/example
yarn install
yarn start