-
Notifications
You must be signed in to change notification settings - Fork 1k
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
Toast: Pin a specific message on User Click #3260
Labels
Resolution: Workaround
Issue or pull request contains a workaround. It needs to be reviewed further by Core Team
Type: New Feature
Issue contains a new feature or new component request
Comments
dani-ras
added
Status: Discussion
Issue or pull request needs to be discussed by Core Team
Type: New Feature
Issue contains a new feature or new component request
labels
Sep 8, 2022
melloware
added
the
Resolution: Workaround
Issue or pull request contains a workaround. It needs to be reviewed further by Core Team
label
Sep 8, 2022
@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); |
Thank you very much! I will take a good look and learn what have been done there |
Closing as workaround provided |
melloware
removed
the
Status: Discussion
Issue or pull request needs to be discussed by Core Team
label
Oct 2, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
Resolution: Workaround
Issue or pull request contains a workaround. It needs to be reviewed further by Core Team
Type: New Feature
Issue contains a new feature or new component request
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
The text was updated successfully, but these errors were encountered: