Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Click the "dismiss/remove" button in the message component will make the duration not work later #367

Open
Levix0501 opened this issue Jul 22, 2024 · 0 comments · Fixed by ultrox/toaster2#1

Comments

@Levix0501
Copy link

'use client';

import toast from 'react-hot-toast';

export default function Home() {
  const onClick = () => {
    toast.custom(
      () => (
        <div className="bg-green-500">
          <p>Hello!</p>
          <button onClick={() => toast.remove()}>remove</button>
        </div>
      ),
      {
        duration: 3000,
      }
    );
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <button onClick={onClick}>make me a toast</button>
    </main>
  );
}

demo: https://stackblitz.com/edit/stackblitz-starters-4valsx?file=app%2Fpage.tsx

  1. click the button "make me a toast"
  2. click the remove button in the toast component
  3. click the button "make me a toast"

and then the toast will not dismiss in 3000ms as it would be

@Levix0501 Levix0501 reopened this Jul 22, 2024
Levix0501 added a commit to Levix0501/react-hot-toast that referenced this issue Jul 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant