README

downloads dependencies dev dependencies

React-Fit

A component that aligns its child relatively to its parent while being aware where it may and may not fit.

tl;dr

Install by executing npm install react-fit or yarn add react-fit.
Import by adding import Fit from 'react-fit'.

Do stuff with it!

const ElementWithChild = () => (
  <Parent>
    <Fit>
      <PopoverChild />
    </Fit>
  </Parent>
);

Getting started

Compatibility

Your project needs to use React 15.5 or later.

A bug in React 16.5.x causes React-Fit to crash on browsers not supporting display: contents. While React-Fit will continue to work on React 16.5.x, it's highly recommended that you either upgrade to ^16.6.0 or downgrade to <=16.4.2.

How does it work?

By default, the element provided to <Fit /> as a child is displayed below its parent, aligned to the left.
If the element can't fit in this position and collides with bottom and/or right border of the container, <Fit /> checks if there's more space for the element on the other side(s) of the axis/axes the collision(s) has been detected on. If so, the element is moved above its parent and/or aligned to the right, depending on the collision axis.
If the element still can't fit where it's placed, <Fit /> decreases the element's size. If min-width/min-height are provided, they will be respected.

Positioning the element

Vertical axis (default)

By default, the element is displayed below its parent, aligned to the left of its parent.

┌────────────┐
│   Parent   │
├────────────┴────────────┐
│                         │
│         Child           │
│                         │
└─────────────────────────┘

To display the element above: provide invertAxis flag.
To align the element to the right: provide invertSecondaryAxis flag.

Horizontal axis (`mainAxis="x"`)

By providing mainAxis="x" to <Fit />, the element is displayed on the right of its parent, aligned to the top of its parent.

┌────────────┬─────────────────────────┐
│   Parent   │                         │
└────────────┤         Child           │
             │                         │
             └─────────────────────────┘

To display the element on the left: provide invertAxis flag.
To align the element to the bottom: provide invertSecondaryAxis flag.

Spacing

By default, React-Fit leaves 8px of space between its child and the borders of the container.

┌──────────────────────────────────────────┐
│ ┌────────────┐                           │
│ │   Parent   │                           │
│ ├────────────┴────────────┐              │
│ │                         │              │
│ │         Child           │              │
│ │                         │              │
│ └─────────────────────────┘              │
└──────────────────────────────────────────┘

If you wish to change this spacing, you can provide spacing to <Fit />. For example, if you wish for the child to touch the borders of the container, decrease the spacing by providing spacing={0} to <Fit />.

┌──────────────────────────────────────────┐
│ ┌────────────┐                           │
│ │   Parent   │                           │
│ ├────────────┴────────────┐              │
│ │                         │              │
│ │         Child           │              │
│ │      (now higher)       │              │
│ │                         │              │
└─┴─────────────────────────┴──────────────┘

You can also provide different spacing for each side by providing an object, for example spacing={{ top: 10, bottom: 20, left: 30, right: 40 }}, to <Fit />. Note: Memoize the object or define it outside render function to avoid unnecessary re-renders.

License

The MIT License.

Author

Wojciech Maj
kontakt@wojtekmaj.pl
https://wojtekmaj.pl

Usage no npm install needed!