Flexipop

An ultra-compact positioning engine inspired by Nanopop, but we decided to create our own solution. The main reason? We wanted something tailored specifically to our library's needs, while also taking the opportunity to learn new techniques and improve our problem-solving skills.

This library thrives on simplicity and efficiency.

Important

This package is a part of the flexilla library's ecosystem.

When to opt for FLEXIPOP over PopperJS?

If you are considering flexipop over PopperJS, it's likely due to similar reasons as Nanopop.

Choose FLEXIPOP for a small, powerful, and efficient positioning solution.

Usage

Installation

npm i flexipop

Usage

import { CreatePopper } from 'flexipop'

new CreatePopper(
    referenceElement,//HTMLElement
    popperElement,//HTMLElement
    {
    //   options here
    }
  )

HTML Markup

<div data-reference-el></div>
<div data-popper-el>Left-start</div>

CSS

⚠ The popperElement must have set position to fixed.

Usage with position absolute

import { CreatePopper } from 'flexipop/with-absolute'

new CreatePopper(
    referenceElement,//HTMLElement
    popperElement,//HTMLElement
    {
    //   options here
    }
  )

Important

⚠ The popperElement must have set position to absolute. The popperElement and referenceElement must be in a same parend container, and the container must have position set to relative