Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@agney/ir-toast

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@agney/ir-toast

Enables the use of imperative Toasts as in Angular

  • 0.2.0
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Ionic React Imperative Toast 🥂

npm License: MIT License: MIT code style: prettier

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:

  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.

Development

We use yarn v1 for development.

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

Keywords

FAQs

Package last updated on 31 Aug 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc