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)