Code: Select all
import { Toast } from 'primereact/toast';
<Toast ref={toast} />
Code: Select all
toast.current.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});
am i forgetting something?
Code: Select all
import { Toast } from 'primereact/toast';
<Toast ref={toast} />
Code: Select all
toast.current.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});
Code: Select all
const toast = useRef(null);
Code: Select all
import React, { useRef, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { InputText } from "primereact/inputtext";
import { Button } from 'primereact/button';
import { Toast } from 'primereact/toast';
import "primereact/resources/themes/lara-light-indigo/theme.css"; //theme
import "primereact/resources/primereact.min.css"; //core css
import "primeicons/primeicons.css"; //icons
function App() {
const [text, setText] = useState("Hallo");
const toastRef = useRef(null);
const showToast = (severityValue: string, summaryValue: string, detailValue: string) => {
toastRef?.current?.show({ severity: severityValue, summary: summaryValue, detail: detailValue });
}
const onButtonClick = () => {
if (text) {
showToast("severityValue", "summaryValue", "detailValue");
}
}
return (
<div className="App">
<Toast ref={toastRef}></Toast>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<InputText value={text} onChange={e => setText(e.target.value)}></InputText>
{text}
<Button type='button' label='Save' icon="pi pi-check" onClick={onButtonClick}></Button>
</header>
</div>
);
}
export default App;
I tried from the template and it works fine there, but in my project I have problem with show method like mentioned above.Melloware wrote: ↑30 Jun 2022, 13:55Please put together a Code Sandbox reproducer showing the issue using my starter PrimeReact template: https://codesandbox.io/s/primereact-test-forked-bbns8k
Thank you Melloware, I found what is problem. In your example from the link I see toast const is defined like this:Melloware wrote: ↑09 Aug 2022, 14:09Sorry use my Vite stackblitz its all TypeScript using PrimeReact similar to Code Sandbox.
https://stackblitz.com/edit/vitejs-vite ... ckage.json
Code: Select all
const toast = useRef<Toast>(null);
Code: Select all
const toast = useRef(null);
Users browsing this forum: No registered users and 9 guests