popper-max-size-modifier
A Popper.js modifier to change the size of your popper
to fit it within the available viewport space.
Installation
npm i popper-max-size-modifier
yarn add popper-max-size-modifier
Demo
https://codesandbox.io/s/great-tesla-3roz7
Usage
import {createPopper} from '@popperjs/core';
import maxSize from 'popper-max-size-modifier';
const applyMaxSize = {
name: 'applyMaxSize',
enabled: true,
phase: 'beforeWrite',
requires: ['maxSize'],
fn({state}) {
const {width, height} = state.modifiersData.maxSize;
state.styles.popper = {
...state.styles.popper,
maxWidth: `${width}px`,
maxHeight: `${height}px`
};
}
};
createPopper(reference, popper, {
modifiers: [maxSize, applyMaxSize]
});
Sometimes you may want the flip
modifier to take precedence in cases where the
maxSize
modifier will make the popper too small (e.g. a minimum acceptable
size):
`${Math.max(100, width)}px`;
`${Math.max(100, height)}px`;
Options
All
detectOverflow
options
can be passed.
createPopper(reference, popper, {
modifiers: [
{
...maxSize,
options: {
boundary: customBoundaryElement,
padding: 20
}
},
applyMaxSize
]
});
Contributing
The source is located in the root package at
src/modifiers/maxSize.js
.