react-lava-lamp-menu

A menu component with a lava lamp effect when selecting a menu option.

Demo

https://jbccollins.github.io/react-lava-lamp-menu/

Install

npm install --save react-lava-lamp-menu

Usage

import React, { Component } from 'react'

import LavaLampMenu from 'react-lava-lamp-menu'

class Example extends Component {
  
  state = {
    selectedItemId: "item1"
  }

  handleSelectedItemChange = id => {
    this.setState({selectedItemId: id});
  }

  render () {
    return (
        <LavaLampMenu
            itemStyle={{color:'red'}}
            mouseOverItemStyle={{color: 'black'}}
            selectedItemStyle={{backgroundColor: 'black', color: 'red'}}
            sliderStyle={{backgroundColor: 'black'}}}
            onSelectedItemChange={this.handleSelectedItemChange}
            items={[
                name: 'Menu Item 1', id: "item1",
                name: 'Menu Item 2', id: "item2",
                name: 'Menu Item 3', id: "item3",
            ]}
            selectedItemId={this.state.selectedItemId}/>
    )
  }
}

prop	description
items	List of menu items
itemStyle	Inline style for all items
mouseOverItemStyle	Inline style for the item that is currently being moused over. Will override any conflicting styles from itemStyle
selectedItemStyle	Inline style for the item that is currently selected. Will override any conflicting styles from itemStyle and mouseOverItemStyle
onSelectedItemChange	Receives the selected item id on click
selectedItemId	The id of the item that is currently selected

Development

From the top level directory run yarn start

In a separate terminal window, from the example directory run yarn start

License

MIT © jbccollins