react-floating-button-menu

KO | EN

gitlite — search

#ai #python #deepseek #react #kotlin #openai #java #home-assistant #homeassistant #emacs #hacs #android

react-floating-button-menu

★ 48 Open GitHub ↗

A customizable floating action button menu that follows material design

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-floating-button-menu

> A customizable floating action button menu

[![NPM](https://img.shields.io/npm/v/react-floating-button-menu.svg)](https://www.npmjs.com/package/react-floating-button-menu) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

Inspired by [react-material-floating-button](https://github.com/nobitagit/react-material-floating-button)

## Install

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

## Demo

See the [project page](https://ifndefdeadmau5.github.io/react-floating-button-menu/)

## Usage

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

```javascript
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

react-floating-button-menu

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README