📐
react-picture-ratio

Um simples (e espero que útil) componente react para renderizar suas imagens mantendo sua proporção.

npm i react-picture-ratio

🇧🇷 Português do Brasil | 🇺🇸 English

💡 Por quê?

Este componente foi construído com o intuito de resolver dois principais problemas:

CLS (Cumulative Layout Shift)

Você já deve ter tido a experiência de estar acessando um site, ele não esta totalmente carregado, você dá um pequeno scroll no conteúdo quando de repente... "pula" uma imagem na tela e empurra o conteúdo que você estava visualizando ou estava prestes a clicar. Pois bem, este tipo de comportamento é medido pelo Core Web Vitals com a métrica de Cumulative Layout Shift.

Aspect Ratio

O Aspect Ratio nada mais é do que a proporção de determinado conteúdo relacionando sua dimões de largura e altura (a imagem abaixo ilustra bem isto). O nosso componente react-picture-ratio manterá a proporção que for passada mas adptando-se ao layout.

Comparação de diferentes proporções (aspect ratio) em dispositivos móveis.
Fonte: https://clipchamp.com/en/blog/what-aspect-ratio/

Componente

• <Picture />: utilize o componente Picture como se fosse uma tag image.

props	type	required	default	description
aspectRatio	string	false	4:3	proporção largura x altura que deseja que sua imagem tenha
className	string	false	-	Nome personalizado do atributo class para o wrap do componente
src	string	true	-	URL de uma imagem
alt	string	true	-	Texto alternativo para a imagem caso ela não seja carregada

<Picture /> herda todas as propriedades de ImgHTMLAttributes

Exemplo de uso

import React from 'react';
import { Picture } from 'react-picture-ratio';

function App() {
  return (
    <div className="App">
      <Picture
        aspectRatio="450:300" // ou "450/300"
        src="https://via.placeholder.com/450x300"
        alt="Imagem com largura de 450px e altura de 300px"
      />
    </div>
  );
}

☑ Instalação

Duas formas:

• 1ª Instale react-picture direto do npm para utilizar em seu projeto.
• 2ª Instale todo o repositório atual e contribua com ele.

1ª Instale react-picture-ratio

yarn add react-picture-ratio
# ou
npm i react-picture-ratio

2ª Contribua para react-picture-ratio

1. Faça o fork do projeto

https://github.com/arimariojesus/react-picture-ratio/fork

# Clone o repositório
git clone https://github.com/{seu_usuario}/react-picture-ratio.git
cd react-picture-ratio

# Instale as dependências
yarn install

# Crie uma nova branch para suas alterações
git checkout -b nova_branch

# Após adicionar suas alterações rode os testes
yarn test

📝 Licença

MIT © Arimário Jesus