🇧🇷 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.

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

Este projeto está sob a licença MIT.

Autor