React Awesome Floating Button

An Awesome & Unique Customizable Floating Button

Powered by The WuuD Team

Build & Run

Demo

Live demo: https://na6im.github.io/awsome-floating-button/

Screenshots

Install

$ npm install react-floating-button
$ yarn add react-floating-button

Usage

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

<FloatingButton 
// specify if the button should be on the right if false the button will be at the left
// not required
        right={true}
// specify if the button should be on the top if false the button will be at the bottom
// not required
        top={true} 
// the height and width of the buttons, not required
        height={60}
// the backgroundColor for the main button, not required
        backgroundColor={"magenta"}
// the color for the main button, not required
        color={"black"}>
    <Item
// the icon to use on given button, not required
        imgSrc={downloadIcon}
// the callback function call onClick not required
        onClick={() => { console.log("callback function here");}}
// the backgroundColor for the Item, not required
        color={'red'}
    />
    <Item
        imgSrc={forwardIcon}
        onClick={() => {
        console.log("callback function here");
       }}
    />
</FloatingButton>

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 -