Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ramiel/caravaggio-react
React components to easily integrate Caravaggio (https://caravaggio.ramielcreations.com)
https://github.com/ramiel/caravaggio-react
caravaggio image image-manipulation image-processing react transformations
Last synced: 3 months ago
JSON representation
React components to easily integrate Caravaggio (https://caravaggio.ramielcreations.com)
- Host: GitHub
- URL: https://github.com/ramiel/caravaggio-react
- Owner: ramiel
- License: mit
- Created: 2020-07-17T15:34:25.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T02:12:10.000Z (over 1 year ago)
- Last Synced: 2024-10-10T22:31:21.509Z (3 months ago)
- Topics: caravaggio, image, image-manipulation, image-processing, react, transformations
- Language: TypeScript
- Homepage: https://caravaggio.ramielcreations.com/docs/nextjs
- Size: 200 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# caravaggio-react
This library provides react components and hooks to integrate [Caravaggio](https://caravaggio.ramielcreations.com) in your react projects.
## Install
Install with
```bash
yarn add caravaggio-react
```
or
```bash
npm install caravaggio-react
```
This library is entirelly written in `typescript`.
## Caravaggio Provider
Any component or hook in this library need to be descendant of a `CaravaggioProvider`. This provider will set which Caravaggio instance to use for transformations. Put this provider as on top as you can.
```tsx
// App.tsx (or App.js)
import { CaravaggioProvider } from "caravaggio-react";
export default function App(props) {
return (
{props.children}
);
}
```
The available props for the provider are
| props | description | optional/mandatory |
|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------|
| url | Tells the provider the url of Caravaggio instance\. It can be an absolute of relative url in case Caravaggio is served from the same domain as your app | mandatory |
| baseUrl | Caravaggio can only transform images with absolute url\. If you want to use relative urls, set this value and all the images will be considered relative to this baseUrl | optional, default \`null` |
## Image component
An image component is available to transform your images. It takes the same props as a normal `img` tag, plus an addotional `opt` props. You can pass any option available on [Caravaggio](https://caravaggio.ramielcreations.com).
```tsx
import { Image } from 'caravaggio-react';
```
In the above example we transform the image to `webp`, with a quality of `90`, a blur effect and resizing it to `640x480` pixels.
Check [Caravaggio documentation](https://caravaggio.ramielcreations.com) to know about all possible options.
## Image srcset
You can generate a [`srcset`](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) using the `ImageSet` component.
```tsx
import { ImageSet } from "caravaggio-react";
;
```
The component generates this html:
```html
```
## Hooks
### useCaravaggio
A hook, `useCaravaggio`, is provided to get, instead of an image tag, an image url with all the transformation applied. Very useful to insert images in css, or for css-in-js libraries
```tsx
import { useCaravaggio } from "caravaggio-react";
const Component = () => {
const image = useCaravaggio("https://img.com/landscape.png", {
blur: 0.3,
});
return
Some content;
};
```
The first parameter is the image to transform, the second an object with all the transformations.
### useCaravaggioIfAvailable
Sometimes you may not be sure if Caravaggio is available or not. This hook behaves exactly as `useCaravaggio` but
is less sensible to problems: if Caravaggio provider is not available or the image is not defined, it returns a sensible default:
```tsx
import { useCaravaggioIfAvailable } from "caravaggio-react";
const Component = ({image}: {image?: string}) => {
const image = useCaravaggioIfAvailable(image, {
blur: 0.3,
});
// If the image is not available returns null.
// If the provider is not available, returns the original image url
return
Some content;
};
```
### useCaravaggioBuilder
This hook return a function that can be invoked later to produce the image url
```tsx
import { useCaravaggioIfAvailable } from "caravaggio-react";
const Component = ({image}: {image?: string}) => {
const builder = useCaravaggioBuilder();
const animals = [
{
name: 'tiger',
image: 'https://images.com/tiger.png'
},
{
name: 'monkey',
image: 'https://images.com/monkey.png'
},
{
name: 'horse',
image: 'https://images.com/horse.png'
}
]
// If the image is not available returns null.
// If the provider is not available, returns the original image url
return
{
animals.map(animal => 
)
};
};
```
## Available options
To know about all the options, check [Caravaggio documentation](https://caravaggio.ramielcreations.com).