react-floating-btn-menu

React Floating Button Menu

A Material floating button menu implementation made with styled-component & react

Inspired by react-material-floating-button and react-floating-button-menu with added labels to buttons.

Installation

npm install react-floating-btn-menu --save

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 } from 'react-floating-button-menu/build';
import MdAdd from 'react-icons/lib/md/add';
import MdClose from 'react-icons/lib/md/close';
 
...
  <FloatingMenu slideSpeed={500} direction="left" size={{ main: 56, child: 40 }}>
    <MainButton
      iconResting={MdAdd}
      iconActive={MdClose}
      iconColor="white"
      backgroundColor="black"
    />
    <ChildButton
      iconButton={MdAdd}
      iconColor="black"
      order={1}
      backgroundColor="white"
      label ="Add"
    />
    <ChildButton
      iconButton={MdAdd}
      iconColor="black"
      order={2}
      backgroundColor="white"
      label="Add another"
    />
  </FloatingMenu>
...

Try the Demos Locally

git clone https://github.com/ifndefdeadmau5/react-floating-btn-menu.git
cd react-floating-button-menu
npm install
cd docs
npm install
npm start

Contributing

Please submit issues.