react-fit
v2.0.1
Published
Fit a popover element on the screen.
Downloads
1,184,672
Maintainers
Readme
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
oryarn add react-fit
. - Import by adding
import Fit from 'react-fit'
. - Do stuff with it!
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?
- 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-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.