react-fit
Version:
Fit a popover element on the screen.
126 lines (93 loc) • 5.48 kB
Markdown
[](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!
```tsx
function ElementWithChild() {
return (
<Parent>
<Fit>
<PopoverChild />
</Fit>
</Parent>
);
}
```
## Getting started
### Compatibility
Your project needs to use React 16.8 or later.
### Installation
Add React-Fit to your project by executing `npm install react-fit` or `yarn add react-fit`.
## How does it work?
1. By default, the element provided to `<Fit />` 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, `<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.
3. 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.
## Styling
To avoid unnecessary style recalculations that may be caused by React-Fit applying the styles needed to make it work properly, the element should have absolute position, and its parent element should have relative or absolute position.
## License
The MIT License.
## Author
<table>
<tr>
<td >
<img src="https://avatars.githubusercontent.com/u/5426427?v=4&s=128" width="64" height="64" alt="Wojciech Maj">
</td>
<td>
<a href="https://github.com/wojtekmaj">Wojciech Maj</a>
</td>
</tr>
</table>