Google News
logo
Popper.js Interview Questions
To pass these extra modifiers as default, you can use the popperGenerator function :
import {
  popperGenerator,
  defaultModifiers,
} from '@popperjs/core/lib/popper-lite';
import flip from '@popperjs/core/lib/modifiers/flip';
import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';

const createPopper = popperGenerator({
  defaultModifiers: [...defaultModifiers, flip, preventOverflow],
});

// Now you can use `createPopper`
The most straightforward way to enable tree-shaking is to use Popper Lite and configure it with your needs.
 
Instead of :
// ❌ Imports all of Popper!
import { createPopper } from '@popperjs/core';
Use :
// ✅
import { createPopper } from '@popperjs/core/lib/popper-lite';
Popper Lite only comes with the following modifiers :
* popperOffsets
* computeStyles
* applyStyles
* eventListeners
 
This effectively achieves the bare minimum functionality, and is around 3 kB minzipped. If 3 kB is still too much for your application, we recommend trying out CSS tooltip alternatives which are as tiny as 1 kB. Please note that such libraries have many disadvantages that Popper doesn't, so assess the trade-offs where necessary.
 
Now, you'll need to add the modifiers you need. These are accessible under the @popperjs/core/lib/modifiers/ directory.
 
Generally, we recommend flip and preventOverflow since these are the most attractive reasons for using Popper in the first place:
import { createPopper } from '@popperjs/core/lib/popper-lite';
import flip from '@popperjs/core/lib/modifiers/flip';
import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';

createPopper(reference, popper, {
  modifiers: [flip, preventOverflow],
});