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: 'write',
requires: ['maxSize'],
fn({state}) {
const {width, height} = state.modifiersData.maxSize;
state.elements.popper.style.maxWidth = `${width}px`;
state.elements.popper.style.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):
state.elements.popper.style.maxWidth = `${Math.max(100, width)}px`;
state.elements.popper.style.maxHeight = `${Math.max(100, height)}px`;