https://github.com/elliott-chong/aero-nudge
Clerk inspired floating toast button for confirmation of actions, powered by Sonner
https://github.com/elliott-chong/aero-nudge
clerk react sonner toast toast-message toast-notifications
Last synced: 8 months ago
JSON representation
Clerk inspired floating toast button for confirmation of actions, powered by Sonner
- Host: GitHub
- URL: https://github.com/elliott-chong/aero-nudge
- Owner: Elliott-Chong
- Created: 2024-07-27T10:25:29.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-30T10:08:49.000Z (over 1 year ago)
- Last Synced: 2025-03-18T17:33:28.462Z (8 months ago)
- Topics: clerk, react, sonner, toast, toast-message, toast-notifications
- Language: TypeScript
- Homepage: https://aero-nudge.netlify.app/
- Size: 107 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
https://github.com/user-attachments/assets/e08b7922-b931-445c-b1f3-f826cb2215c7
# aero-nudge
Clerk inspired floating toast button for confirmation of actions, powered by Sonner.
## Installation
```bash
npm install aero-nudge
# or
yarn add aero-nudge
# or
pnpm add aero-nudge
```
## Pre-requisites
Please make sure to install sonner and import the Toaster component into your root layout first! More instructions [here](https://github.com/emilkowalski/sonner)
```typescript
import { Toaster, toast } from 'sonner';
// ...
function App() {
return (
toast('My first toast')}>Give me a toast
);
}
```
## Usage
```typescript
import useActionToast from 'aero-nudge';
const MyComponent = () => {
const handleAction = async () => {
// Your action logic here
};
const handleReset = () => {
// Your reset logic here
};
useActionToast({
onAction: handleAction,
onReset: handleReset,
isLoading: false,
show: true,
description: 'Optional description'
});
return (
// Your component JSX
);
};
```
## API
### `useActionToast` Hook
This hook creates a floating toast button for confirming actions.
#### Props
- `onAction`: `() => Promise` - Function to call when the "Save" button is clicked.
- `onReset`: `() => void` - (Optional) Function to call when the "Reset" button is clicked.
- `isLoading`: `boolean` - Whether the action is in progress.
- `show`: `boolean` - Whether to show the toast.
- `description`: `string` - (Optional) Additional description to show in the toast.
## Features
- Clerk-inspired design
- Powered by Sonner for toast notifications
- Customizable action and reset buttons
- Loading state support
- Optional description text
## Dependencies
- React
- sonner
## License
MIT
## Author
Elliott Chong