Three components that will make life easier for a React layout designer

In the course of my career, I have developed various Dashboards for CRM systems. These are grids of cards that, before reaching the threshold in width, behave like rubber ones, after which they are adaptive. Below I will give three basic components that have radically simplified my life, I think they will be useful to you too.

ScaleView

The amount of text on the widget does not allow content to fit into the card on a mobile device with a small screen size. It is impossible to make an adaptive according to the assignment. This component fit the widget to a smaller size by automatically applying centering and scaling

These two widgets are similar, but they are at different scaling

import { ScaleView } from 'react-declarative'

...

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

fade view

Sometimes in an already written widget you need add a blur to show macOS and mobile users the presence of scrolling. The problem is that for the project manager this task is insignificant in terms of time, but it requires a lot of work in terms of layout.

This is how a freelancer was left without a salary due to a flaw in UX!

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

If you want make a rubber square on CSS with reference to the size of the parent, you have to use a hack padding-bottom: 100%. This can lead to problems. Additionally, you can do canvas, stretching to fit the parent. This component solves the above two tasks

The side of the gray square is calculated by the size of the parent block

import { AutoSizer } from 'react-declarative'

...

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