Toast: Pin a specific message on User Click

[dani-ras]

Describe the feature you would like to see added

Hi, I'm trying to figure out a way to make a Toast with a limited life span to become sticky on user click.

The Toast.onClick method takes the current clicked toast message read-only object, perhaps it could accept a return value for which it would set the updated Toast? I've seen the .replace method, but seemingly it would replace the whole messages que, and the purpose is to have the ability to update a single message.

In the meanwhile, hopefully someone could suggest a workaround for making a specific toast message stick on user click?

Is your feature request related to a problem?

No response

Describe the solution you'd like

No response

Describe alternatives you have considered

No response

Additional context

No response

[melloware]

@dani-ras Here is a working Sandbox showing you how to do it: https://codesandbox.io/s/naughty-sun-0t91ne?file=/src/demo/ToastDemo.js

import "primeicons/primeicons.css";
import "primereact/resources/themes/lara-light-indigo/theme.css";
import "primereact/resources/primereact.css";
import "primeflex/primeflex.css";
import "../../index.css";
import ReactDOM from "react-dom";

import React, { useRef, useState } from "react";
import { useTimeout } from "primereact/hooks";
import { Toast } from "primereact/toast";
import { Button } from "primereact/button";
import "./ToastDemo.css";

const ToastDemo = () => {
  const toast = useRef(null);
  const [sticky, setSticky] = useState(false);
  const life = 4000;

  const [clearTimer] = useTimeout(
    () => {
      clear();
    },
    life,
    !sticky
  );

  const showSuccess = () => {
    setSticky(false);
    toast.current.show({
      severity: "success",
      summary: "Success Message",
      detail: "Message Content",
      sticky: true
    });
  };

  const clear = () => {
    toast.current.clear();
  };

  const onToastClick = () => {
    clearTimer();
    setSticky(true);
  };

  return (
    <div>
      <div className="card toast-demo">
        <h5>Toast Sticky on click</h5>
        <Toast ref={toast} onClick={onToastClick} />
        <Button
          label="Success"
          className="p-button-success mt-8"
          onClick={showSuccess}
        />
      </div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<ToastDemo />, rootElement);

[dani-ras]

Thank you very much! I will take a good look and learn what have been done there

[melloware]

Closing as workaround provided