1const [alertBar1, AlertBar1] = useAlertBar();
2const [alertBar2, AlertBar2] = useAlertBar();
3const [alertBar3, AlertBar3] = useAlertBar();
4const [alertBar4, AlertBar4] = useAlertBar();
5
6useEffect(() => {
7  // alert success with many line
8  alertBar2.info("This is info message!");
9  alertBar1.success("Congratulation! you have successfully login!");
10  alertBar3.warning(
11    <p>
12      <b>Warning!</b>
13      <p>This is warning message!</p>
14    </p>
15  );
16  alertBar4.error(
17    <div>
18      <p>This is error message!</p>
19      <a className="flex items-center gap-0.5 mt-1 cursor-pointer hover:underline font-semibold px-1 rounded-md py-0.5 border border-red-600">
20        Learn more
21        <RightIcon />
22      </a>
23    </div>
24  );
25}, []);
26
27return (
28  ...
29    {AlertBar1}
30    {AlertBar2}
31    {AlertBar3}
32    {AlertBar4}
33  ...
34);