react-motion-float-button 🌈

🧚 A simple React component floating button library which can be customized by developers 🧚

---

🏃‍♂️ Getting Started

installation

npm install react-motion-float-button --save

or

yarn add react-motion-float-button

emotion-icons

you can easily use icons in button by installing emotion-icons

npm emotion-icons

npm install emotion-icons --save

or

yarn add emotion-icons

👀 icon explorer

📃 Usage

You can customize opening direction, size, colors of buttons via props. Other motions and options will be added soon

import {
  Direction,
  FloatMenuItemButton,
  FloatingGroup,
  Size,
} from "react-motion-float-button";

you can add emotion-icons and use various icons by importing only you need

import { Twitter } from "@emotion-icons/simple-icons";
import { Facebook, Instagram, Share } from "@emotion-icons/remix-fill";

also can customize icons, colors and define functions

  const handleButton = () => {
    console.log("you clicked first icon!");
  };

  return (
    <>
        <FloatingGroup size={Size.REGULAR} direction={Direction.TOP} spacing={100}>
          <FloatMenuItemButton
            icon={<Twitter size="50%" />}
            buttonColor="#00ACEE"
            onClick={handleButton}
          />
          <FloatMenuItemButton
            icon={<Instagram size="60%" />}
            buttonColor="#4f5bd5"
          />
          <FloatMenuItemButton
            icon={<Facebook size="20%" />}
            buttonColor="#3B5998"
          />
          <FloatMenuItemButton
            icon={<Share size="50%" />}
            buttonColor="#16dbc2"
          />
        </FloatingGroup>
    </>
  );

👀 Props

FloatingGroup

Prop	Type	Description
size	String	Button size; REGULAR is 56px, SMALL is 40px
Direction	String	spread direction; TOP, BOTTOM, LEFT, RIGHT
Spacing	Number	margin of button container; default is 20

FloatMenuItemButton

Prop	Type	Description
icon	Component	icon component
buttonColor	String	each icon's color

😎 contributors

4 FE Developers 🧞‍♂️

jinsun Park(jinsunee)

JungHun Choi(chjjh0)

Wonjong Oh(dev-owen)

SeoYoung Um(tjdud0123)