A toast notification is a long standing custom in mobile application used to notify the user of something happening within the system. Sometimes it even has buttons for interaction.
Here is how to use one (straight from the docs):
function ToastExample: FC = () => {
const [showToast, setShowToast] = useState(false);
return (
<IonToast
isOpen={showToast}
onDidDismiss={() => setShowToast(false)}
message="Your settings have been saved."
duration={200}
/>
)
}
Well, this is easy ๐I can do that.
But I normally thinks of toasts more imperatively than this. It might be because of libraries like react-toast
or ant.design
who have these imperative toast messaging systems, or it could even be that Ionic's own Angular part of design has an imperative toast.
Also, if I needed to a success toast and an error toast, I would need multiple IonToast
components rendered or have states definining toast state.
In Angular Ionic, you would:
const toast = this.toastController.create({
message: '',
});
toast.present();
That's pretty cool ๐. What if we could do this?
We could utilise a React Context and a hook to achieve this functionality at with ease. I wrote out a custom package which does exactly that.
import { ToastProvider, useToast } from "@agney/ir-toast";
// Wrap you App.tsx with ToastProvider
const App: FC = () => {
<IonApp>
<ToastProvider>
// ...rest of your application
</ToastProvider>
</IonApp>
}
// 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');
}
}
}
This allows you have to have error messages with a one liner:
Toast.error('Error message');
The ToastProvider
also takes a value
property that allows you to define defaults for all toasts created in it's children.
The package also enables creating toast messages with the same Angular API as:
function Component: FC = () => {
const Toast = useToast();
const handleClick = () => {
const toast = Toast.create({ message: 'thing' });
toast.present();
// When you want to.
toast.dismiss();
...
}
// ...
}
To install the package:
npm i @agney/ir-toast
Note that it has a dependency on both React and Ionic React.
Ionic React Imperative Toast ๐ฅ
This packages enables the use of imperative Toasts as in Angular.
Usage
import { ToastProvider, useToast } from "@agney/ir-toast";
// Wrap you App.tsx with ToastProvider
const App: FC = () => {
<IonApp>
<ToastProvider>
// ...rest of your application
</ToastProvider>
</IonApp>
}
// 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
npm i @agney/ir-toast
Requires react 16.8โฆ
Top comments (1)
Cool idea ๐