React-picture-ratio NPM

npm

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

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