Enables the use of imperative Toasts as in Angular

Usage no npm install needed!

<script type="module">
  import agneyIrToast from 'https://cdn.skypack.dev/@agney/ir-toast';


Ionic React Imperative Toast 🥂

npm License: MIT License: MIT code style: prettier

This packages enables the use of imperative Toasts as in Angular.


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');


npm i @agney/ir-toast

Requires react 16.8 or higher and @ionic/react 5 or higher.



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 = () => {
    <ToastProvider value={{ color: 'primary', duration: 2000 }}>
      // ...rest of your application

Supports all properties in docs.


Hook to be used in functional components.

function Component: FC = () => {
  const Toast = useToast();

  const handleClick = () => {
    const toast = Toast.create({ message: 'thing' });
    // When you want to.

  // ...

Toast returned from useToast supports:

  1. 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.

  1. 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.


We use yarn v1 for development.

yarn start

Run tests

yarn test

Show your support

Give a ⭐️ if this project helped you!

Twitter: agneymenon

📝 License

Copyright © 2020 Agney Menon agney@outlook.in.
This project is MIT licensed.