popper-max-size-modifier
A Popper.js modifier to change the size of your popper to fit it within the available viewport space.
Installation
# With npm npm i popper-max-size-modifier # With Yarn yarn add popper-max-size-modifier
Demo
https://codesandbox.io/s/great-tesla-3roz7
Usage
;; // Create your own apply modifier that adds the styles to the stateconst applyMaxSize = name: 'applyMaxSize' enabled: true phase: 'beforeWrite' requires: 'maxSize' { // The `maxSize` modifier provides this data const width height = statemodifiersDatamaxSize; statestylespopper = ...statestylespopper maxWidth: `px` maxHeight: `px` ; }; ;
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):
// Minimum acceptable size is 100px`px`;`px`;
Options
All
detectOverflow
options
can be passed.
;
Contributing
The source is located in the root package at
src/modifiers/maxSize.js
.