[](https://www.npmjs.com/package/react-fit)  [](https://github.com/wojtekmaj/react-fit/actions)  
# 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!
```js
const ElementWithChild = () => (
);
```
## 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`](https://caniuse.com/#feat=css-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?
1. By default, the element provided to `` as a child is displayed below its parent, aligned to the left.
2. If the element can't fit in this position and collides with bottom and/or right border of the container, `` 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.
3. If the element still can't fit where it's placed, `` 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 ``, 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 ``. For example, if you wish for the child to touch the borders of the container, decrease the spacing by providing `spacing={0}` to ``.
```
┌──────────────────────────────────────────┐
│ ┌────────────┐ │
│ │ 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 ``. **Note:** Memoize the object or define it outside render function to avoid unnecessary re-renders.
## License
The MIT License.
## Author
