https://github.com/ajoelp/toast

Toast message library for react.
https://github.com/ajoelp/toast

react tailwind toast

Last synced: 9 days ago
JSON representation

Toast message library for react.

• Host: GitHub
• URL: https://github.com/ajoelp/toast
• Owner: ajoelp
• Created: 2020-12-23T20:24:38.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-12-29T02:06:07.000Z (about 4 years ago)
• Last Synced: 2025-02-03T01:37:51.533Z (12 days ago)
• Topics: react, tailwind, toast
• Language: TypeScript
• Homepage:
• Size: 1.06 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Toast Notifications

![npm](https://img.shields.io/npm/v/@ajoelp/toast)

![Test](https://github.com/ajoelp/toast/workflows/Test/badge.svg?branch=main)

## Getting Started

```sh

npm install @ajoelp/toast

```

Install the toast wrapper in your root app file.

```jsx

import React from 'react';

import { ToastWrapper } from '@ajoelp/toast';

function App(){

  return 

}

```

Trigger toast notifications from anywhere in your application

```jsx

import { toast } from '@ajoelp/toast';

toast("This is the toast message", {

  type: 'success' | 'error' | 'info' | 'warning',

  isHtml: true,

  delay: 1500

})

// Or use the typed helpers

toast.info("This is the toast message")

toast.success("This is the toast message")

toast.error("This is the toast message")

toast.warning("This is the toast message")

```

Override the toast message component

```jsx

import React from 'react';

import { ToastWrapper } from '@ajoelp/toast';

function CustomContainer({ close, message, active, options}){

  return (

    
{message}

  )

}


function App(){

  return 

}

```