React Awesome Floating Button

An Awesome & Unique Customizable Floating Button

Build & Run

Demo

Live demo: https://floating-button.namokrane.works/

Screenshots

Install

With npm

npm install react-floating-button

With yarn

yarn add react-floating-button

Usage

import { FloatingButton, Item } from "react-floating-button";
import downloadIcon from "./assets/DOWNLOAD.svg";
import forwardIcon from "./assets/FORWARD.svg";

<FloatingButton>
  <Item
    imgSrc={downloadIcon}
    onClick={() => {
      console.log("callback function here");
    }}
  />
  <Item
    imgSrc={forwardIcon}
    onClick={() => {
      console.log("callback function here");
    }}
  />
</FloatingButton>;

Options

FloatingButton

Property	Description	Type	Default
right	Specify if the button should be on the right if false the button will be at the left	boolean	`true`
top	Specify if the button should be on the right if false the button will be at the left	boolean	`false`
size	The size used for the buttons	number	`60`
backgroundColor	The backgroundColor for the main button	string	`#8f1d30`
color	The color for the main button	string	`#dbdbdb`

Item

Property	Description	Type	Default
imgSrc	The icon to use on given button	string	-
backgroundColor	The backgroundColor for the Item	string	`#dbdbdb`
onClick	Called when an item is clicked	func	-

Attribution

React Pose powered by Popmotion
Built & Developed from React JS

Contributing to The Project

Contributing to the project is a piece of 🍰, read the contributing guidelines. You can discuss the project using the issues section. To add a line create an issue and send a pull request, see how to send a pull request.

License

The code is available under the MIT license.

WuuD® - in code we trust -

azouaoui-med/react-floating-button