multi-levels-popper

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