react-floating-button

React Awesome Floating Button

An Awesome & Unique Customizable Floating Button

Powered by The WuuD Team

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 :cake:, 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 -