Package Exports

react-motion-float-button

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-motion-float-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

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)