Решение проблемы несбалансированных логотипов: React компонент LogoSoup

#react#frontend#ui

TL;DR: Библиотека react-logo-soup решает проблему несбалансированных логотипов, автоматически нормализуя их пропорции, плотность пикселей и оптическое выравнивание с помощью React компонента и хука.

Введение

Каждый frontend-разработчик сталкивался с задачей отображения логотипов партнеров на сайте. Обычно это набор файлов в разных форматах (SVG, PNG) с разными пропорциями и непонятными отступами. Ручная подгонка размеров занимает много времени, а добавление новых логотипов требует повторной работы. Мы создали библиотеку react-logo-soup, которая автоматически решает эту проблему.

Основная часть

Библиотека react-logo-soup использует три ключевых подхода для нормализации логотипов:

  1. Пропорциональная нормализация: Учитывает соотношение сторон и масштабный коэффициент.
  2. Анализ плотности пикселей: Обеспечивает, чтобы плотные логотипы не перевешивали визуально тонкие.
  3. Оптическое выравнивание: Рассчитывает визуальный центр массы для выравнивания.

Установка

Для начала установите библиотеку через npm:

npm install react-logo-soup

Использование компонента <LogoSoup />

Пример использования компонента:

import React from 'react';
import { LogoSoup } from 'react-logo-soup';

const logos = [
  { src: '/path/to/logo1.svg', alt: 'Logo 1' },
  { src: '/path/to/logo2.png', alt: 'Logo 2' },
  // Добавьте другие логотипы
];

function App() {
  return (
    <div>
      <LogoSoup logos={logos} />
    </div>
  );
}

export default App;

Использование хука useLogoSoup

Если вам нужен более кастомный layout, используйте хук useLogoSoup:

import React from 'react';
import { useLogoSoup } from 'react-logo-soup';

const logos = [
  { src: '/path/to/logo1.svg', alt: 'Logo 1' },
  { src: '/path/to/logo2.png', alt: 'Logo 2' },
  // Добавьте другие логотипы
];

function CustomLogoSoup() {
  const { normalizedLogos } = useLogoSoup(logos);

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
      {normalizedLogos.map((logo, index) => (
        <img key={index} src={logo.src} alt={logo.alt} style={{ width: logo.width, height: logo.height }} />
      ))}
    </div>
  );
}

export default CustomLogoSoup;

Практическое применение

Библиотека react-logo-soup особенно полезна в случаях, когда требуется отобразить множество логотипов с разными характеристиками. Например, на странице партнеров или клиентов компании. Она позволяет сэкономить время и обеспечить единообразный вид всех логотипов.

Для более глубокого понимания математических расчетов, лежащих в основе библиотеки, рекомендую ознакомиться с поясняющим блогом.

Также доступен демо-проект в Storybook, где можно увидеть работу библиотеки в действии.

Заключение

Библиотека react-logo-soup предлагает удобное решение для автоматической нормализации логотипов. Она позволяет сосредоточиться на более важных задачах, избавляя от необходимости ручной подгонки размеров и выравнивания. Попробуйте библиотеку в своих проектах и поделитесь обратной связью, особенно по части компенсации плотности и оптического выравнивания.

Исходный код доступен на GitHub.

Источник: https://www.sanity.io/blog/the-logo-soup-problem