react-floating-button-menu

A customizable floating action button menu

Inspired by react-material-floating-button

Install

npm install --save react-floating-button-menu

Demo

See the project page

Usage

You can customize opening direction, speed, and styles of each button via props. Other options will be added soon

import {
  FloatingMenu,
  MainButton,
  ChildButton,
  Directions
} from 'react-floating-button-menu';
import MdAdd from '@material-ui/icons/add';
import MdClose from '@material-ui/icons/clear';
import MdFavorite from '@material-ui/icons/favorite';

state = {
  isOpen: false,
}
...
  <FloatingMenu
    slideSpeed={500}
    direction={Directions.Up}
    spacing={8}
    isOpen={this.state.isOpen}
  >
    <MainButton
      iconResting={<MdAdd style={{ fontSize: 20 }} nativeColor="white" />}
      iconActive={<MdClose style={{ fontSize: 20 }} nativeColor="white" />}
      background="black"
      onClick={() => this.setState({ isOpen: !this.state.isOpen })}
      size={56}
    />
     <ChildButton
      icon={<MdFavorite style={{ fontSize: 20 }} />}
      background="white"
      size={40}
      onClick={() => console.log('First button clicked')}
    />
    <ChildButton
      icon={<MdFavorite style={{ fontSize: 20 }} />}
      background="white"
      size={40}
    />
    <ChildButton
      icon={<MdFavorite style={{ fontSize: 20 }} />}
      background="white"
      size={40}
    />
  </FloatingMenu>
...

License

MIT © ifndefdeadmau5