FloatingActionButton

A versatile floating action button component for React, designed with customization and flexibility in mind. It supports multiple styles, shadows, icon integration, and responsive sizing.

Installation

npm install @precooked/react-floating-action-button

Usage Example

import React from "react";
import FloatingActionButton from "@precooked/react-floating-action-button";

const App = () => {
    const handleClick = () => {
        console.log("Floating Action Button Clicked!");
    };

    return (
        <div>
            <FloatingActionButton
                onClick={handleClick}
                color="primary"
                icon="plus"
                type="solid"
                size="md"
                hasShadow={true}
            />
        </div>
    );
};

export default App;

Props

| Prop | Type | Description | Default | |---------------|-----------------------------------------|------------------------------------------------------------------------------------------|------------| | onClick | () => void | Callback function triggered when the button is clicked. | undefined| | color | keyof colors \| string | Defines the button color. Accepts predefined color keys or custom hex codes. | "primary"| | borderRadius| number | Sets the border radius of the button. | 999 | | type | "clear" \| "outline" \| "solid" | Defines the button style. | "solid" | | disabled | boolean | Disables the button if set to true. | false | | icon | string | The name of the icon to display. | undefined| | iconPaths | string[] | Custom SVG paths for the icon. | undefined| | iconSize | number | Size of the icon in pixels. | Calculated | | hasShadow | boolean | Determines whether the button has a shadow. | true | | style | React.CSSProperties | Additional custom styles for the button. | {} | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | Sets the size of the button, adjusting padding and icon size. | "md" |

Features

• Supports multiple styles: solid, outline, and clear.
• Customizable shadow and border radius.
• Dynamic icon support, including custom SVG paths.
• Responsive sizing options (xs, sm, md, lg, xl).
• Lightweight and easy to integrate.

Contributing

Feel free to submit issues or feature requests in the GitHub repository.

License

MIT