React Mini Floating Action Button

A lightweight and customizable Mini Floating Action Button (Mini FAB) component for React applications. This component provides an easy way to add a floating action button to your UI, enhancing user interaction and accessibility.

Features

• Draggable - Vertically draggable with position persistence via localStorage
• Touch Support - Full touch event support for mobile devices with scroll prevention during drag
• Smooth Animations - Elegant show/hide animations and position transitions
• Flexible Positioning - Support for left and right screen positions with animated switching
• Badge Support - Optional badge indicator for notifications or status
• Highly Customizable - Configurable colors, icons, and accessibility labels
• TypeScript Support - Full TypeScript type definitions included
• Lightweight - Minimal dependencies and optimized bundle size
• Accessibility First - Built with ARIA labels and keyboard navigation support

Installation

Prerequisites

This library requires React as a peer dependency. Make sure you have React installed in your project:

• React 17.x, 18.x, or 19.x

If you don't have React installed, install it first:

npm install react react-dom

yarn add react react-dom

pnpm add react react-dom

Install react-mini-fab

Install the package using your preferred package manager:

npm install react-mini-fab

yarn add react-mini-fab

pnpm add react-mini-fab

Usage

Here's a basic example of how to use the MiniFAB component:

import { MiniFAB } from 'react-mini-fab';

import 'react-mini-fab/style.css';

function App() {
  return (
    <MiniFAB
      onClick={() => console.log('FAB clicked!')}
      position="right"
      title="Help"
      ariaLabel="Open help window"
      backgroundColor="#007bff"
      draggableId="help-fab"
    >
      <svg width="24" height="24" viewBox="0 0 24 24">
        {/* Your icon SVG */}
      </svg>
    </MiniFAB>
  );
}

Props API

MiniFABProps

Badge

Examples

With Badge Indicator

<MiniFAB
  onClick={() => console.log('Notification clicked')}
  position="right"
  ariaLabel="Notifications"
  backgroundColor="#ff6b6b"
  draggableId="notification-fab"
  badge={{ color: "#00ff00" }}
>
  <NotificationIcon />
</MiniFAB>

Dynamic Position Switching

function App() {
  const [position, setPosition] = useState<"left" | "right">("left");

  return (
    <>
      <button onClick={() => setPosition(position === "left" ? "right" : "left")}>
        Toggle Position
      </button>
      <MiniFAB
        position={position}
        ariaLabel="Settings"
        backgroundColor="#9b59b6"
        draggableId="settings-fab"
      >
        <SettingsIcon />
      </MiniFAB>
    </>
  );
}

Show/Hide Control

function App() {
  const [isHidden, setIsHidden] = useState(false);

  return (
    <>
      <button onClick={() => setIsHidden(!isHidden)}>
        {isHidden ? 'Show' : 'Hide'} FAB
      </button>
      <MiniFAB
        isHide={isHidden}
        ariaLabel="Help"
        backgroundColor="#3498db"
        draggableId="help-fab"
      >
        <HelpIcon />
      </MiniFAB>
    </>
  );
}

With Custom Text

<MiniFAB
  onClick={() => console.log('Chat opened')}
  ariaLabel="Open chat"
  backgroundColor="#2ecc71"
  draggableId="chat-fab"
>
  <span style={{ color: '#fff', fontWeight: 'bold' }}>Chat</span>
</MiniFAB>

Accessibility

This component is built with accessibility in mind:

• ARIA Labels: The ariaLabel prop is required to ensure screen readers can properly identify the button's purpose
• Keyboard Navigation: The FAB is fully keyboard accessible using standard button interactions. When isHide is true, the button is automatically excluded from keyboard tab navigation
• Disabled State Support: When hidden (isHide={true}), the button receives both disabled and aria-disabled attributes, ensuring proper accessibility for screen readers and keyboard users
• Focus Indicators: Clear focus outlines for keyboard navigation
• Semantic HTML: Uses proper <button> element for interactive functionality
• Tooltip Support: Optional title prop provides additional context on hover

Development

This library is built using modern tooling and best practices:

Build

pnpm run build

The build process generates both UMD and ES module formats:

• UMD: dist/index.umd.cjs (for CommonJS environments)
• ES Module: dist/index.js (for modern bundlers)
• TypeScript definitions: dist/index.d.ts

Testing

# Run tests
pnpm run test

# Run tests with UI
pnpm run test:ui

# Run tests with coverage
pnpm run test:coverage

Storybook

View and interact with component examples:

# Start Storybook dev server
pnpm run dev:storybook

# Build Storybook
pnpm run build:storybook

Code Quality

# Lint and format with Biome
pnpm run check:write

LICENSE

MIT