C5 Toasts

This is simple library that I wanted to build. Definatly inspired by React-Toastify. I wanted to see if I could build my own implementation using a PubSub design pattern. This has been an extremely fun project. If you are looking for toasts in production, please use React-Toastify, but if you want to see an extremely simple version of this implementation, feel free to check out the code. I am very new to Typescript so I will be enhancing as I learn more about it.

for Installation

1  npm install c5-toasts

or for yarn

1  yarn add c5-toasts

simple implementation

1import {ToastContainer, toast} from 'c5-toasts';
2
3  const App = () => {
4
5    const handleButtonClick = () => {
6      toast.success('Hello I am a toast, 😎', {
7        animation: 'flip'
8      });
9      toast.info('Here is some info'):
10      toast.warning('Dont go there');
11      toast.error('Something went wrong');
12    }
13
14
15    return (
16      <div>
17        <button onClick={handleClick}>Press me to see some toasts!</button>
18        <ToastContainer />
19      </div>
20    )
21  }

The ToastContainer can take in these props:

1<ToastContainer
2  position="top-right"
3  showLastOnTop={true}
4  autoClose={true}
5  autoCloseDelay={4000}
6  showIcons={true}
7  animation="zoom"
8/>

You can also customize the toast like this:

1.testToast {
2  background-color: rgb(17, 46, 71) !important;
3  color: #fff !important;
4}

1toast.success('Here is my toast 🦝', {
2  className: 'testToast',
3  style: {
4    borderRadius: '20px',
5  },
6  showIcon={false}
7  autoClose={false}
8});