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

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.

import { NotifierPortal } from 'zeit-toast-clone'
import 'zeit-toast-clone/styles.css'

const App = () => {
  return <NotifierPortal />
}

Import and use the notifier wherever you want.

import notifier from 'zeit-toast-clone'

const Component = () => {
  return (
    <button onClick={() => notifier.info('Say hello to my little friend')}>Show message</button>
  )
}

API

<NotifierPortal />

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

<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 <NotifierPortal />, but also there is a few CSS classes and variables.

Demo

I created a storybook application dedicated to the demo: https://zeit-toast-clone.vercel.app