multi-levels-popper

Made with create-react-library

This component will help you create nested poppers.

Install

npm install --save multi-levels-popper

Usage

In this example, we use Tippy.js(recommend) to display popper, you can use other libraries.

import { MultiLevelsPopper } from 'multi-levels-popper'

const MyComponent = () => {
  return (
    <Tippy
      interactive
      placement='right-start'
      render={(attrs) => (
        <MultiLevelsPopper>
          <SettingPopper />
        </MultiLevelsPopper>
      )}
    >
      <button style={{ position: 'absolute', top: '200px', left: '200px' }}>
        My button
      </button>
    </Tippy>
  )
}

Customized Popper

import { Popper, PopperItem } from 'multi-levels-popper'

const SettingPopper = () => {
  return (
    <Popper>
      <PopperItem>
        <div>Setting 1</div>
      </PopperItem>
      <PopperItem childPopper={<ChildPopper />}>
        <div>Setting 2</div>
      </PopperItem>
      <PopperItem>
        <div>Setting 3</div>
      </PopperItem>
    </Popper>
  )
}

When you click on PopperItem which has childPopper prop, it will display the child popper.

MultiLevelsPopper Props

Prop	Description	Required
children	The first level popper.	✔
dark	Switch to dark theme.

Popper Props

Prop	Description	Required
title	Popper's header title.
maxHeigth	This will enable vertical scroll bar. Example: maxHeight='200px'
className	You can pass className from parent.

PopperItem Props

Prop	Description	Required
childPopper	Child popper(next level popper). Example: childPopper={<ChildPopper />}

License

MIT © huahoangphuc4201