react-picture-ratio
v0.9.8
Published
A simple aspect ratio component for react
Downloads
14
Maintainers
Readme
🇧🇷 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
📝 Licença
Este projeto está sob a licença MIT.