Skip to content

Latest commit

 

History

History
50 lines (33 loc) · 1.61 KB

README.md

File metadata and controls

50 lines (33 loc) · 1.61 KB

Getting Started with Create React App

This project was bootstrapped with Create React App.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Concept

I don't like my current implementation of the ToastProvider and how it manages the various toast timeouts because it relies on refs to be able to get the up-to-date version of the toasts stack in the timeout callback, which feels kinda icky.

So I was thinking about it and wondered if I could make something that could remain stateful by using event subscriptions.

PLAN:

  • SubComponent

    • each one uses addToast & passes the variant

  • ToastProvider

    • renders the contextual Toast notifications

    • useToast hook allows for SubComponents to addToast

    • Toast renders black w/ icon using the variant color passed in

    • toasts have timeouts

    • toast are a stack (LIFO)

    • publish "pause"-id event when not top-of-stack

    • ToastProvider is subscribed to timer events so it can update stack state at end of timer without having to use refs.

    • [ each toast could also consider using the Timer context just to render its timer's state. ]

  • "TimerProvider"

    • shares a context-providing hook for subcomponents to be able to subscribe to timer events
    • Events: "timer-start", "timer-pause", "timer-end", "timer-clear" -- would need to pass id w/ events

  • headless ui transition in & out?

    • you can do it without headless UI :)