A lightweight, customizable and animated ⚛️ react floating buttons
npm install --save react-floating-buttons
import React, { Component } from 'react'
import FloatingButtons from 'react-floating-buttons'
import icon1 from './assets/icon1.svg'
import icon2 from './assets/icon2.svg'
class Example extends Component {
this.buttonsList = [
{ onClick: ()=> alert('clicked icon1'), src: icon1 },
{ onClick: ()=> alert('clicked icon2'), src: icon2 },
]
render() {
return <FloatingButtons buttonType='plus' dimension={50} buttonsList={this.buttonsList} top={'calc(50% - 25px)'} left={'5%'} direction="right" />
}
}
type: string, isRequired: false, default: 'hamburger'
The toggler button type, accepts: hamburger, plus, vert-dots or hori-dots
type: number, isRequired: false, default: 40
The buttons dimensions { width, height }
type: number | string, isRequired: false, default: 0
The offsetTop position of the toggler button
type: number | string, isRequired: false, default: 0
The offsetLeft position of the toggler button
type: string, isRequired: false, default: '#f8f9fa'
The toggler button background color
type: string, isRequired: false, default: '#313131'
The toggler button color ( the dots color, the plus color ... )
type: string, isRequired: false, default: '#f8f9fa'
The toggler button color ( the dots color, the plus color ... )
type: string, isRequired: false, default: 'circular'
The direction of the nav when opened, accepts: left, right, up, down or circular
type: number, isRequired: false, default: 100
The distance between the toggler button and the buttons, used only with direction='circular'
type: number, isRequired: false, default: 180
The angle of the circle, used only with direction='circular'
type: [{ onClick: () => {}, src: '' }], isRequired: true
The buttons item, a list of object where each object must have: onClick
function to handle on click button and src
the source of the icon of that button.
To run the exemple you need to:
- clone this repo:
git clone https://github.com/AM-77/react-floating-buttons.git
- inside the react-floating-buttons folder run:
yarn
ornpm i
- inside the example folder run:
yarn
ornpm i
then run:yarn start
ornpm start
circular 360 degree
circular down 180 degree
circular customizable degree
direction right
direction left
customized background & direction up
Feel free to raise an Issue or submit a PR.
Code copyright 2019 AM-77. Code released under MIT license.