react-magic-line-menu v3.0.1

🧙‍ React Magic Line Menu

Browser support

Getting started

npm i -S react-magic-line-menu

or

yarn add react-magic-line-menu

import MagicLineMenu from 'react-magic-line-menu';

<MagicLineMenu active={0} onItemClick={index => console.log(index)}>
  <div>Home</div>
  <div>Contacts</div>
</MagicLineMenu>

Props

active

The index of active item.

onItemClick

Called when click a menu item.

menuStyle?: Object, lineStyle?: Object, menuClassName?: string, lineClassName?: string,

menuStyle?

Override the inline-styles of the root element.

lineStyle?

Override the inline-styles of the line element.

menuClassName?

CSS className of the root element.

lineStyle?

CSS className of the line element.

lineHeight?

Height of line in px.

lineColor?

Color of line.

duration?

Determines the duration of the animation in milliseconds.

easing?

Penner's equations:

<MagicLineMenu
  active={0}
  onItemClick={index => console.log(index)}
  easing="easeInQuad"
>
  <div>Home</div>
  <div>Contacts</div>
</MagicLineMenu>