https://github.com/cateiru/react-mini-fab
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.
https://github.com/cateiru/react-mini-fab
floating-action-button npm react
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/cateiru/react-mini-fab
- Owner: cateiru
- License: mit
- Created: 2025-10-19T12:42:18.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2026-04-14T05:10:58.000Z (3 months ago)
- Last Synced: 2026-04-14T07:22:23.777Z (3 months ago)
- Topics: floating-action-button, npm, react
- Language: TypeScript
- Homepage: https://cateiru.github.io/react-mini-fab/
- Size: 718 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Mini Floating Action Button
[](https://www.npmjs.com/package/react-mini-fab) [](https://cateiru.github.io/react-mini-fab/)
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:
```bash
npm install react react-dom
```
```bash
yarn add react react-dom
```
```bash
pnpm add react react-dom
```
### Install react-mini-fab
Install the package using your preferred package manager:
```bash
npm install react-mini-fab
```
```bash
yarn add react-mini-fab
```
```bash
pnpm add react-mini-fab
```
## Usage
Here's a basic example of how to use the MiniFAB component:
```tsx
import { MiniFAB } from 'react-mini-fab';
import 'react-mini-fab/style.css';
function App() {
return (
console.log('FAB clicked!')}
position="right"
title="Help"
ariaLabel="Open help window"
backgroundColor="#007bff"
draggableId="help-fab"
>
{/* Your icon SVG */}
);
}
```
## Props API
### MiniFABProps
| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `onClick` | `() => void` | No | - | Callback function invoked when the button is clicked |
| `isHide` | `boolean` | No | `false` | Controls the visibility of the button. When `true`, the button is hidden and automatically receives `disabled` and `aria-disabled` attributes for improved accessibility |
| `title` | `string` | No | - | Tooltip text displayed when hovering over the button |
| `ariaLabel` | `string` | **Yes** | - | Accessibility label for screen readers |
| `backgroundColor` | `string` | **Yes** | - | Background color of the button (any valid CSS color) |
| `color` | `string` | No | `#000000` | Color of the button text/icon (any valid CSS color) |
| `position` | `"left" \| "right"` | No | `"left"` | Position of the button on the screen |
| `draggableId` | `string` | No | - | Unique identifier for the draggable functionality. When provided, the vertical position is saved to localStorage |
| `badge` | `Badge` | No | - | Badge configuration to display on the button |
| `includeFixedClassName` | `boolean` | No | `false` | Whether to include fixed class names for custom styling purposes |
| `children` | `React.ReactNode` | No | - | Content to be rendered inside the button (typically an icon or text) |
### Badge
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `color` | `string` | **Yes** | Background color of the badge (any valid CSS color) |
## Examples
### With Badge Indicator
```tsx
console.log('Notification clicked')}
position="right"
ariaLabel="Notifications"
backgroundColor="#ff6b6b"
draggableId="notification-fab"
badge={{ color: "#00ff00" }}
>
```
### Dynamic Position Switching
```tsx
function App() {
const [position, setPosition] = useState<"left" | "right">("left");
return (
<>
setPosition(position === "left" ? "right" : "left")}>
Toggle Position
>
);
}
```
### Show/Hide Control
```tsx
function App() {
const [isHidden, setIsHidden] = useState(false);
return (
<>
setIsHidden(!isHidden)}>
{isHidden ? 'Show' : 'Hide'} FAB
>
);
}
```
### With Custom Text
```tsx
console.log('Chat opened')}
ariaLabel="Open chat"
backgroundColor="#2ecc71"
draggableId="chat-fab"
>
Chat
```
## 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 `` 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
```bash
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
```bash
# 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:
```bash
# Start Storybook dev server
pnpm run dev:storybook
# Build Storybook
pnpm run build:storybook
```
### Code Quality
```bash
# Lint and format with Biome
pnpm run check:write
```
## LICENSE
[MIT](./LICENSE)