React - implement a component as js api - reactjs

Question

I want to create a stack of toast messages in my app.
I dont want to re-draw the <Toast component over and over again.
My need is to call it as a function and it will render itself
Something like:
Toast.push({time: 5, message: 'Data was submitted', type: 'success'});
Toast.push({time: 2, message: 'Data was not processed yet', type: 'warn'});
This way I can manage the DOM array inside the component and it will be some sort of a singleton component. One instance for the entire app
Is it possible to call and display a component like: Toast.push(...);
Im using function based components with the latest react
Update
This concept is implemented in ant.design https://ant.design/components/message/ - message.warn('Some message').
I want to avoid props and contexts... It needs to be as simple as possible... Toast.push(...) that's it
Thanks

Answer 1

You can create a custom useToast hook, returning an element and a push function.
//App.js
import useToast from "./useToast";
export default function App() {
const { toast, push } = useToast();
return (
<div>
<p>Your stuff here</p>
{toast}
<button onClick={() => push({ message: "hi" })} />
</div>
);
}
//useToast.js
import { useState } from "react";
export default function useToast(initial = []) {
const [list, setList] = useState(initial);
return {
push(data) {
setList([...list, data]);
},
toast: (
<ul>
{list.map(({ message }, i) => <li key={i}>{message}</li>)}
</ul>
),
};
}