https://github.com/agneym/ir-toast
Imperative Toast Component for Ionic React
https://github.com/agneym/ir-toast
ionic ionic-react notification react toast
Last synced: 2 months ago
JSON representation
Imperative Toast Component for Ionic React
- Host: GitHub
- URL: https://github.com/agneym/ir-toast
- Owner: agneym
- License: mit
- Created: 2020-03-27T16:45:00.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2026-03-06T11:24:56.000Z (3 months ago)
- Last Synced: 2026-03-06T15:40:01.350Z (3 months ago)
- Topics: ionic, ionic-react, notification, react, toast
- Language: TypeScript
- Homepage:
- Size: 1.91 MB
- Stars: 15
- Watchers: 1
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Ionic React Imperative Toast 🥂
This packages enables the use of imperative Toasts as in Angular.
## Usage
```typescript
import { ToastProvider, useToast } from "@agney/ir-toast";
// Wrap you App.tsx with ToastProvider
const App: FC = () => {
// ...rest of your application
}
// In your component
const RegisterForm: FC () => {
const Toast = useToast();
// ...
function validate() {
const toast = Toast.warning('Passwords don\'t match');
}
function submit(data) {
try {
const response = await api.register(data);
Toast.success('Registration Successful');
} catch() {
Toast.error('Request failed');
}
}
}
```
## Installation
```bash
npm i @agney/ir-toast
```
Requires react 16.8 or higher and @ionic/react 5 or higher.
## Properties
### `ToastProvider`
The `useToast` requires the app to be wrapped with a `ToastProvider`. The Provider can also take a `value` as prop which serves as defaults for all toasts created under it.
```typescript
const App: FC = () => {
// ...rest of your application
}
```
Supports all properties in [docs](https://ionicframework.com/docs/api/toast#properties).
### `useToast`
Hook to be used in functional components.
```typescript
function Component: FC = () => {
const Toast = useToast();
const handleClick = () => {
const toast = Toast.create({ message: 'thing' });
toast.present();
// When you want to.
toast.dismiss();
...
}
// ...
}
```
`Toast` returned from `useToast` supports:
1. `create`
A toast instance is created, takes all the props in [docs](https://ionicframework.com/docs/api/toast#properties) as argument. Returns a toast instance that can be presented by calling `present` and dismissed calling `dismiss` on it.
2. Utility functions: `success`, `warning`, `error`
Takes one argument: message as string. Does not require `present` to be called, directly shows the toast.
```typescript
const toast = toast.success('Success message');
```
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/agneym/ir-toast/issues).
### Development
We use [`yarn` v1](https://classic.yarnpkg.com/) for development.
```sh
yarn
yarn start
```
### Run tests
```sh
yarn test
```
## Show your support
Give a ⭐️ if this project helped you!
## 📝 License
Copyright © 2020 [Agney Menon ](https://github.com/agneym).
This project is [MIT](https://github.com/agneym/ir-toast/blob/master/LICENSE) licensed.