Package Exports

react-fit

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-fit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

downloads build 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 window, <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 collision axis.
If the element still can't fit where it's placed, <Fit /> decreases 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.

License

The MIT License.

Author

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

react-fit