npm i react-picture-ratio

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

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.

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/

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

<Picture /> herda todas as propriedades de ImgHTMLAttributes

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>
  );
}

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.

yarn add react-picture-ratio
# ou
npm i 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

MIT © Arimário Jesus