openedx / openedx/paragon

[discovery] Implement `Toasts` container

Open
#1,858 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

engineering
Dominant language
JavaScript
Stars
140
Forks
100
Avg merge
1h 3m
Merged PRs (30d)
30

Description

Context

Currently, consumers of Paragon's Toast must render the Toast before its visible (for fade in transition to work properly). However, consumers need to implement their own state to determine whether the Toast is visible or not.

It may be helpful to provide a ToastContainer component with helpful utility function(s) to dynamically create/show Toast notifications as needed throughout the component rendering lifecycle.

Possibly use for inspiration:


Prior notes:

Toast component makes it trivial to render a single toast for a given use case. However, it does not adequately provide a mechanism to support multiple toasts displayed at once, keeping their animation (fade in/out) and their default close behavior.

Ideas

  • Should we separate out the logic of
    • "data" -> toastText
    • Some key that exists used as "global state" to flag when a toast is trigger on/off.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing Paragon's existing Toast component and the behavior described in this issue. Compare the referenced react-hot-toast and react-toastify projects for container and notification patterns. The work is done when a defined ToastContainer API supports multiple toasts, visibility state, fade transitions, and default closing behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.