react-floating-btn-menu
v1.0.16
Published
A Customizable Material floating button menu implementation made with styled-component & react.
Downloads
26
Maintainers
Readme
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.