https://github.com/moharnadreza/react-toast

Minimal toast notifications for React.
https://github.com/moharnadreza/react-toast

react react-toast toast toast-notifications

Last synced: about 2 months ago
JSON representation

Minimal toast notifications for React.

• Host: GitHub
• URL: https://github.com/moharnadreza/react-toast
• Owner: moharnadreza
• License: mit
• Created: 2020-12-06T10:56:08.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-04-20T19:50:47.000Z (over 1 year ago)
• Last Synced: 2024-09-08T22:27:24.700Z (3 months ago)
• Topics: react, react-toast, toast, toast-notifications
• Language: TypeScript
• Homepage: https://codesandbox.io/s/byqvk
• Size: 320 KB
• Stars: 73
• Watchers: 3
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - react-toast - [demo](https://codesandbox.io/s/byqvk) - [docs](https://github.com/moharnadreza/react-toast/blob/main/README.md) - Minimal toast notifications. (UI Components / Notification)
• awesome-react - react-toast - Minimal toast notifications.  (UI Components / Notification)
• awesome-react-components - react-toast - [demo](https://codesandbox.io/s/byqvk) - [docs](https://github.com/moharnadreza/react-toast/blob/main/README.md) - Minimal toast notifications. (UI Components / Notification)
• fucking-awesome-react-components - react-toast - 🌎 [demo](codesandbox.io/s/byqvk) - <b><code>&nbsp;&nbsp;&nbsp;&nbsp;76⭐</code></b> <b><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5🍴</code></b> [docs](https://github.com/moharnadreza/react-toast/blob/main/README.md)) - Minimal toast notifications. (UI Components / Notification)

README

        


  

  
React Toast




  Minimal toast notifications for React.




  

    

  

  

  

  

  

  

  



## Get started

### Quick start

**Install with yarn**

```sh

yarn add react-toast

```

**Install with NPM**

```sh

npm install react-toast

```

```jsx

import { ToastContainer, toast } from 'react-toast'

const App = () => {

  const wave = () => toast('Hi there 👋')

  return (

    


      Say hi!

      

    

  )

}

```


### Demo

[Demo](https://codesandbox.io/s/byqvk) on CodeSandbox.

### Docs

#### Toast Container

To use `react-toast`, you need to put `ToastContainer` in a top-level component in your application. e.g. `App.js`

It can take some props, here's a list of them:

| Props         | Type                                                                                            | Description       | Default       |

| :------------ | :---------------------------------------------------------------------------------------------- | :---------------- | :------------ |

| `position`    | `top-left` \| `top-center` \| `top-right` \| `bottom-left` \| `bottom-center` \| `bottom-right` | position of toast | `bottom-left` |

| `delay` (ms) | `number`                                                                                        | delay for toast   | `6000`        |

#### Toast

There are 4 base toast type available, `success`, `error`, `info` and `warn`. For instance:

```js

const success = () => toast.success('Message sent successfully!')

```

or

```js

fetch('someRandomUrl')

  .then(res => res.json())

  .then(res => console.log(res))

  .catch(err => toast.error(err.message))

```

**Custom toast**

You can display custom styled toasts, here's an example and a list of options that are available for customization:

```js

const customToast = () =>

  toast('Morning! Have a good day.', {

    backgroundColor: '#8329C5',

    color: '#ffffff',

  })

```

| Property          | Type     | Description               | Default                                           |

| :---------------- | :------- | :------------------------ | :------------------------------------------------ |

| `backgroundColor` | `string` | background color of toast | based on toast type, e.g. `success` will be green |

| `color`           | `string` | color of text in toast    | `#ffffff`                                         |

## License

[MIT](https://github.com/moharnadreza/react-toast/blob/develop/LICENSE)