An Awesome & Unique Customizable Floating Button

Build & Run

Install

With npm

npm install react-floating-button-cpress

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 burger icon | 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

• Built & Developed from React JS

License

The code is available under the [MIT] license.