Три компонента, которые упростят жизнь React верстальщику

В ходе трудовой деятельности я разрабатывал различные Dashboard для CRM систем. Это сетки из карточек, которые до достижения порога по ширине ведут себя как резиновые, после как адаптивные. Ниже я приведу три базовых компонента, которые радикально упростили мне жизнь, думаю, будут полезны и вам

ScaleView

Количество текста на виджете не позволяет вписать содержимое в карточку на мобильном устройстве при малом размере экрана. По заданию сделать адаптив нельзя. Этот компонент вписать виджет в меньший размер, автоматически применив центровку и масштабирование

import { ScaleView } from 'react-declarative'

...

<ScaleView
  center
  style={{
    height: "100%",
    width: "100%"
  }}
>
  <canvas ref={canvasRef} width="800" height="375" />
</ScaleView>

FadeView

Иногда в уже написанный виджет нужно добавить размытие, показывающее пользователям macOS и мобильных устройств наличие скроллинга. Проблема в том, что для менеджера проекта эта задача незначительна по времени, но, она требует большой проработки с точки зрения верстки

import { FadeView } from 'react-declarative'

...

<FadeView
  disableRight
  style={{
    width: '100%',
    height: '300px',
  }}
>
  <p>
    Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s.
  </p>
</FadeView>

AutoSizer

Если вы захотите сделать резиновый квадрат на CSS с привязкой к размеру родителя, вам придется воспользоваться хаком padding-bottom: 100%. Это может привести к проблемам. Дополнительно, можно сделать canvas, растягивающийся по размеру родителя. Данный компонент решает две вышеупомянутые задачи

import { AutoSizer } from 'react-declarative'

...

<AutoSizer>
  {({ height, width }) => {
    const size = Math.min(height, width);
    return (
      <div
        style={{
          height: side,
          width: side,
          background: 'grey',
        }}
      />
    )
  })
</AutoSizer>

Спасибо за внимание!

Надеюсь, представленные выше примеры помогут вам в будущем расширить библиотеку компонентов вашего приложения собственной реализацией :-)