🧙‍ React Magic Line Menu

Browser support

Chrome	Safari	IE / Edge	Firefox	Opera
24+	6+	10+	32+	15+

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

Default	Type
0	number

The index of active item.

onItemClick

Default	Type
	Function(index: number)

Called when click a menu item.

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

menuStyle?

Default	Type
	Object

Override the inline-styles of the root element.

lineStyle?

Default	Type
	Object

Override the inline-styles of the line element.

menuClassName?

Default	Type
	string

CSS className of the root element.

lineStyle?

Default	Type
	string

CSS className of the line element.

lineHeight?

Default	Type
1	number

Height of line in px.

lineColor?

Default	Type
black	string

Color of line.

duration?

Default	Type
500	number

Determines the duration of the animation in milliseconds.

easing?

Default	Type
linear	string

Penner's equations:

easeIn	easeOut	easeInOut
easeInQuad	easeOutQuad	easeInOutQuad
easeInCubic	easeOutCubic	easeInOutCubic
easeInQuart	easeOutQuart	easeInOutQuart
easeInQuint	easeOutQuint	easeInOutQuint
easeInSine	easeOutSine	easeInOutSine
easeInExpo	easeOutExpo	easeInOutExpo
easeInCirc	easeOutCirc	easeInOutCirc
easeInBack	easeOutBack	easeInOutBack
easeInElastic	easeOutElastic	easeInOutElastic

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