1.2.2 • Published 3 years ago
@tag0/react-image v1.2.2
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-imageComponents
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