thinkawitch / preact-bs-toast

Bootstrap toast with preact simultaneously

preact-bs-toast

Bootstrap js with preact simultaneously. Hook and component to use bootstrap toast.
No build tool needed, just preact and hyperscript tagged markup (htm).

See an example ➡️

---

Usage Example

function App() {
    return html`
        <${ToastContextProvider}>
            <div class="card">
                <${DemoComponent} />
            </div>
            <${ToastHolder} position="bottom-right" />
        <//>
    `;
}

function DemoComponent() {
    const { addToast, removeToast, toastId } = useToast();
    const showToast = () => {
        addToast({ 
            icon: 'bi-sun', title: 'Always sunny', 
            message: "It's always sunny in California", 
            type: 'warning', delay: 10000 
        });
    }
    return html`
        <div class="card-body">
            <button class="btn btn-primary" onClick=${showToast}>toast</button>
        </div>
    `;
}