https://github.com/rqbazan/zeit-toast-clone

🗨 Inspired by https://vercel.com/design/toast
https://github.com/rqbazan/zeit-toast-clone

notifications react-spring toast

Last synced: 20 days ago
JSON representation

🗨 Inspired by https://vercel.com/design/toast

• Host: GitHub
• URL: https://github.com/rqbazan/zeit-toast-clone
• Owner: rqbazan
• License: mit
• Created: 2019-09-03T17:46:38.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-03-27T01:12:08.000Z (almost 3 years ago)
• Last Synced: 2023-11-24T10:05:03.195Z (about 1 year ago)
• Topics: notifications, react-spring, toast
• Language: TypeScript
• Homepage: https://zeit-toast-clone.vercel.app
• Size: 482 KB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ZEIT TOAST CLONE

A front-end challenge required by myself 😅, I worked with animation effects

powered by the awesome `react-spring` library. 😍

## Basic Usage

Install the library and its peer dependencies

```bash

yarn add zeit-toast-clone

npx install-peerdeps zeit-toast-clone

```

Import and render the `NotifierPortal` component in the root of your

application, as well as the styles.

```jsx

import { NotifierPortal } from 'zeit-toast-clone'

import 'zeit-toast-clone/styles.css'

const App = () => {

  return 

}

```

Import and use the `notifier` wherever you want.

```jsx

import notifier from 'zeit-toast-clone'

const Component = () => {

  return (

     notifier.info('Say hello to my little friend')}>Show message

  )

}

```

## API

### ``

| PropName    | Type             | Default        | Description                                         |

| ----------- | ---------------- | -------------- | --------------------------------------------------- |

| `component` | `ReactComponent` | `Notification` | The notification component to show the messages     |

| `height`    | `number`         | `64`           | Height of the notification _(needed for animation)_ |

| `offset`    | `number`         | `16`           | Offset of the notification _(needed for animation)_ |

### `notifier`

| Attribute | Type                        | Description                 |

| --------- | --------------------------- | --------------------------- |

| `info`    | `(message: string) => void` | Show an info notification   |

| `error`   | `(message: string) => void` | Show an error notification  |

| `success` | `(message: string) => void` | Show a success notification |

| `warning` | `(message: string) => void` | Show a warning notification |

### ``

> This component wasn't created to be customizable, I exposed it just for demo

> purposes on the storybook package.

| PropName  | Type                                          | Description                  |

| --------- | --------------------------------------------- | ---------------------------- |

| `kind`    | `'error' \| 'warning' \| 'success' \| 'info'` | Flavor of the notification   |

| `message` | `string`                                      | Content displayed as message |

## Customize

The first level of customization is possible through the props of

``, but also

[there is a few CSS classes and variables.](https://github.com/rqbazan/zeit-toast-clone/blob/master/packages/library/styles.css)

## Demo

I created a storybook application dedicated to the demo:

https://zeit-toast-clone.vercel.app