react-thumbnails

React components to show thumbnails with various on-screen options.

live example

Install

npm install react-thumbnails

Develop

git clone https://github.com/erhangundogan/react-thumbnails
cd react-thumbnails
npm install
npm run watch
# browse http://localhost:5000

There are optional components such as URLEditor and ErrorProvider. Please see example below. Check out type definitions for further options.

<ImagesProvider
  options={{ maxImagesCount: 9 }}
  urls={[
    'https://images.unsplash.com/photo-1452570053594-1b985d6ea890?w=634&q=80',
    'https://images.unsplash.com/photo-1464820453369-31d2c0b651af?w=800&q=80',
    'https://images.unsplash.com/photo-1586348943529-beaae6c28db9?w=658&q=80'
  ]}
>
  <URLEditor />
  <ThumbnailOptionsProvider
    showOptions={new Set(['autoSize', 'size', 'shape', 'shadow', 'border', 'showUrl'])}
    defaults={{ size: 'medium', shape: 'circle', shadow: true, border: true }}
  >
    <Thumbnails />
  </ThumbnailOptionsProvider>
</ImagesProvider>