README

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 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();
    // When you want to.
    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!

@agney/ir-toast

Usage no npm install needed!