optimized-image v1.0.0

📦 Instalación

El paquete es privado, por lo tanto debes estar ingresado con la cuenta de npm en la terminal.

npm install @marioarancibia/optimized-image

yarn add @marioarancibia/optimized-image

Añade a tu .env las variables

Next JS

NEXT_PUBLIC_THUMBOR_KEY=12345678
NEXT_PUBLIC_THUMBOR_URL=https://thumbor.com

Otro

THUMBOR_KEY=12345678
THUMBOR_URL=https://thumbor.com

🔨 Uso del componente

Optimized-Image

import { OptimizedImage } from '@marioarancibia/optimized-image';

const App = () => (
    <>
        <OptimizedImage
            src="https://clycme-images.s3.us-east-2.amazonaws.com/images/logo/c_logo.png"
            alt="Logo clyc.me"
            width={100}
            height={100}
        />
    </>
);

Esto generará la url desde thumbor y te devolverá un <img /> con todos los props que le pasaste a este componente.

useThumbor

import { useThumbor } from '@marioarancibia/optimized-image';

const imageUrl = useThumbor()
    .filter('fill(ff0000)')
    .setImagePath('https://imagenes.com/imagen1.jpg')
    .resize(300, 200)
    .buildUrl();

Puedes llegar a necesitarlo si aplicaras algun filtro como el extact_focal()

⌨️ Documentación

Props del componente OptimizedImage

Filtros

Filtros a aplicar por thumbor

Lo que escribas en los filtros será lo que irá dentro del paréntesis

Por ejemplo

<OptimizedImage filters={{ fill: 'ff0000' }} />

Se aplicará como fill(ff0000)

Si quieres revisar la documentación oficial de thumbor, el link es este.

Los valores que esten rodeados por , son opcionales.