zeit-toast-clone v0.0.1

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 />

notifier

<Notification />

This component wasn't created to be customizable, I exposed it just for demo purposes on the storybook package.

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.rqbazan.now.sh