Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bouzayenilyes/aero-nudge
Clerk inspired floating toast button for confirmation of actions, powered by Sonner.
https://github.com/bouzayenilyes/aero-nudge
nextjs14 shadcn-ui typescript
Last synced: about 1 month ago
JSON representation
Clerk inspired floating toast button for confirmation of actions, powered by Sonner.
- Host: GitHub
- URL: https://github.com/bouzayenilyes/aero-nudge
- Owner: bouzayenilyes
- Created: 2024-10-05T08:33:20.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-11-07T06:06:33.000Z (2 months ago)
- Last Synced: 2024-11-07T07:20:24.587Z (2 months ago)
- Topics: nextjs14, shadcn-ui, typescript
- Language: TypeScript
- Homepage:
- Size: 80.1 KB
- Stars: 1
- 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