@tag0/react-image

React Image

React image toolset

<ImagesProvider
  options={{ verifyUrls: true, maxFileSize: 1048576 }}
  urls={[
    'https://images.unsplash.com/photo-1617397248879-fa8130d66d3f?w=640&q=70',
    'https://images.unsplash.com/photo-1611095973362-88e8e2557e58?w=640&q=70',
    'https://images.unsplash.com/photo-1593642634367-d91a135587b5?w=640&q=70'
  ]}
>
  <Thumbnails shape="star" />
  <Thumbnails shape="circle" />
  <Thumbnails shape="square " caption="All images courtesy of unsplash.com" />
</ImagesProvider>

Live Demo

https://codesandbox.io/s/react-image-sandbox-fszqm

Install

yarn add @tag0/react-image
# OR
npm i @tag0/react-image

Components

ErrorProvider

Top level context to handle errors gracefully and show error toast with timeout. This is optional. If you want you can use your own error mechanism.

ImagesProvider

Context provider to fetch single/multiple images and keep their data in the context. This provider is mandatory. Other components use this context to get images.

Property	Type	Default	Description
urls	string[]	[]	URL addresses to fetch images
options.failEarly	boolean	false	Fetch operation fails if this is "true" and any request fails
options.verifyUrls	boolean	false	This option activates set of verification and validations. When enabled it filters identical URL addresses, invalid URL addresses, non-image resources and images bigger than maxFileSize via HEAD request / content-length header. It's a great way to filter big images
options.maxFileSize	number	10485760	Max allowed image size in bytes (default 10MB = 10 * 1024 * 1024)
options.ignoreVerificationErrors	boolean	false	Do not show console errors for verifyUrls filtering
options.fetchOptions	RequestInit	{ cache: 'force-cache' }	Fetch API options

Thumbnails

Shows thumbnail images

Property	Type	Default	Description
width	number	128	Thumbnail width (px)
height	number	128	Thumbnail height (px)
caption	string	undefined	Caption text to show below thumbnails
shape	square, circle, star or undefined	undefined	Thumbnail's shape. Omit this prop to show proportional.

Development/Contribution

This project is in development and welcomes contributors. Please see monorepo packages and example in react-image-playground package.

Start local development via shell commands below and then browse http://localhost:5000 to see playground.

Monorepo requires NPM@7 workspaces support. You can install it via npm i -g npm@7 shell command.

git clone https://github.com/erhangundogan/react-image.git
cd react-image
npm install
# Build and watch for changes
npm start