A component that aligns its child relatively to its parent while being aware where it may and may not fit.
- Install by executing
npm install react-fitoryarn add react-fit. - Import by adding
import Fit from 'react-fit'. - Do stuff with it!
function ElementWithChild() { return ( <Parent> <Fit> <PopoverChild /> </Fit> </Parent> ); }
Your project needs to use React 16.8 or later.
Add React-Fit to your project by executing npm install react-fit or yarn add react-fit.
- 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. Ifmin-width/min-heightare provided, they will be respected.
By default, the element is displayed below its parent, aligned to the left of its parent.
┌────────────┐
│ Parent │
├────────────┴────────────┐
│ │
│ Child │
│ │
└─────────────────────────┘
- To display the element above: provide
invertAxisflag. - To align the element to the right: provide
invertSecondaryAxisflag.
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
invertAxisflag. - To align the element to the bottom: provide
invertSecondaryAxisflag.
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.
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.
The MIT License.
|
Wojciech Maj |
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent