Ionic React Imperative Toast 🥂
This packages enables the use of imperative Toasts as in Angular.
Usage
import { ToastProvider, useToast } from "@agney/ir-toast";
const App: FC = () => {
<IonApp>
<ToastProvider>
// ...rest of your application
</ToastProvider>
</IonApp>
}
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
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.
const App: FC = () => {
<IonApp>
<ToastProvider value={{ color: 'primary', duration: 2000 }}>
// ...rest of your application
<ToastProvider>
</IonApp>
}
Supports all properties in docs.
useToast
Hook to be used in functional components.
function Component: FC = () => {
const Toast = useToast();
const handleClick = () => {
const toast = Toast.create({ message: 'thing' });
toast.present();
toast.dismiss();
...
}
}
Toast
returned from useToast
supports:
create
A toast instance is created, takes all the props in docs as argument. Returns a toast instance that can be presented by calling present
and dismissed calling dismiss
on it.
- Utility functions:
success
, warning
, error
Takes one argument: message as string. Does not require present
to be called, directly shows the toast.
const toast = toast.success("Success message");
🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Development
We use yarn
v1 for development.
yarn
yarn start
Run tests
yarn test
Show your support
Give a ⭐️ if this project helped you!
📝 License
Copyright © 2020 Agney Menon agney@outlook.in.
This project is MIT licensed.