react-bubble-toast

A tool to add notifications to your ReactJS application.

Installation

$ pnpm i react-bubble-toast
$ npm i --save react-bubble-toast

// Layout.tsx
import { Bubbler } from 'react-bubble-toast';

function Layout() {

    return (
        <>
            <Bubbler />
        </>
    )
}

export default Layout;

What to call a bubble

import { bubble } from 'react-bubble-toast';

function Page() {
    return (
        <div>
            <button
            onClick={() => {
                bubble('Your message here', {
                    style: {
                        borderRadius: 9999
                    }
                })
            }}
            >Push Toast</button>
        </div>
    )
}

API Reference

<Bubbler position toastBar options={}/>

|Prop|Type| Default| |--|--|--| |position|'bottom-left' | 'bottom-right' OR 'bottom-center' | 'bottom-top' | 'top-left' | 'top-right' | 'top-center'|bottom-right| |toastBar|CustomContainer|null |options|{ duration?: number; overlay?: boolean; containerClassName?: string; containerStyle?: React.CSSProperties; reverseOrder?: boolean }|undefined|

How to create your own bubble

// App.tsx
import { Bubbler, type CustomContainer } from 'react-bubble-toast';

function App() {

    return (
        <>
            <Bubbler
            toastBar={(t: CustomContainer) => (
                <div className={`${t.visible ? 'animation-in' : 'animation-out'} bg-white rounded-lg p-2 shadow-sm shadow-[rgba(0, 0, 0, 0.26)] text-center font-geist cursor-pointer text-black dark`}>
                    {t.value}
                </div>
            )}
            />
        </>
    )
}
export default App;