Skip to content

Latest commit

 

History

History
77 lines (55 loc) · 2.61 KB

README.md

File metadata and controls

77 lines (55 loc) · 2.61 KB
Raw

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