Три компонента, которые упростят жизнь 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>

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

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