cool-react-floating-button

A lightweight, animated floating button component for React, perfect for modern UI's. Easily customizable with multiple options, backdrop darkening, and Tailwind styling support.

Key Features

• Smooth Animations: Eye-catching open/close animations.
• Customizable: Tailwind-compatible for seamless integration with your styling.
• Multiple Options: Supports multiple action buttons in a flexible menu.
• Backdrop Darkening: Optional overlay for focused interactions.

Installation

Install with npm

npm i cool-react-floating-button

Usage

Import

import {
    FloatingButton,
    FloatingButtonIcon,
    FloatingButtonOptionContainer,
    FloatingButtonOption,
    FloatingButtonOptionIcon,
    FloatingButtonOptionLabel,
} from "cool-react-floating-button";

Use in app

import React, { useState } from "react";
import { Plus, User } from "lucide-react";

function App() {
    const [open, setOpen] = useState(false);

    return (
        <FloatingButton open={open} setFloatBtnOpen={setOpen}>
            <FloatingButtonIcon>
                <Plus />
            </FloatingButtonIcon>
            <FloatingButtonOptionContainer>
                <FloatingButtonOption onClick={() => alert("Department clicked!")}>
                    <FloatingButtonOptionIcon>
                        <User />
                    </FloatingButtonOptionIcon>
                    <FloatingButtonOptionLabel>Department</FloatingButtonOptionLabel>
                </FloatingButtonOption>
                <FloatingButtonOption onClick={() => alert("Coordinator clicked!")}>
                    <FloatingButtonOptionIcon>
                        <User />
                    </FloatingButtonOptionIcon>
                    <FloatingButtonOptionLabel>Coordinator</FloatingButtonOptionLabel>
                </FloatingButtonOption>
            </FloatingButtonOptionContainer>
        </FloatingButton>
    );
}
export default App;