Toast
Elements that provide contextual feedback messages for user actions. The notification is a simple colored block meant to draw the attention to the user about something. In each toast we need a unique id
Success Toast
Used to show success messages
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, { useState } from "react";
import Toast from '@neoKit/toast';
const SuccessExample = () => {
const [success, setSuccess] = useState(false);
const showSuccess = () => {
setSuccess(true);
};
return (
<div className="flex gap-3">
<Buttons onClick={() => showSuccess()}>Success</Buttons>
</div>
{success && (
<Toast
title="success"
autoDelete
autoDeleteTime={1500}
description="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque, voluptates delectus sequi cupiditate nihil quos. Minima, magnam pariatur? Minima enim omnis perspiciatis blanditiis maiores, porro provident? Impedit animi blanditiis eos?"
type="success"
id={toastId}
></Toast>
)}
);
};
export default SuccessExample;Error Toast
Used to show error messages
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React, { useState } from "react";
import Toast from '@neoKit/toast';
const ErrorExample = () => {
const [error, setError] = useState(false);
const showError = () => {
setError(true);
setToastId(toastId + 1);
};
return (
<div className="flex gap-3">
<Buttons onClick={() => showError()}>Error</Buttons>
</div>
{error && (
<Toast
title="error"
autoDelete
autoDeleteTime={1500}
description="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque, voluptates delectus sequi cupiditate nihil quos. Minima, magnam pariatur? Minima enim omnis perspiciatis blanditiis maiores, porro provident? Impedit animi blanditiis eos?"
type="error"
id={toastId}
></Toast>
)}
);
};
export default ErrorExample;info Toast
Used to show info messages
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { useState } from "react";
import Toast from '@neoKit/toast';
const InfoExample = () => {
const [info, setInfo] = useState(false);
const showInfo = () => {
setInfo(true);
setToastId(toastId + 1);
};
return (
<div className="flex gap-3">
<Buttons onClick={() => showInfo()}>Info</Buttons>
</div>
{info && (
<Toast
title="info"
autoDelete
autoDeleteTime={1500}
description="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque, voluptates delectus sequi cupiditate nihil quos. Minima, magnam pariatur? Minima enim omnis perspiciatis blanditiis maiores, porro provident? Impedit animi blanditiis eos?"
type="info"
id={toastId}
></Toast>
)}
);
};
export default InfoExample;Warning Toast
Used to show warning messages
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { useState } from "react";
import Toast from '@neoKit/toast';
const WarningExample = () => {
const [warning, setWarning] = useState(false);
const showWarning = () => {
setWarning(true);
setToastId(toastId + 1);
};
return (
<div className="flex gap-3">
<Buttons onClick={() => showInfo()}>Info</Buttons>
</div>
{warning && (
<Toast
title="Warning"
autoDelete
autoDeleteTime={1500}
description="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque, voluptates delectus sequi cupiditate nihil quos. Minima, magnam pariatur? Minima enim omnis perspiciatis blanditiis maiores, porro provident? Impedit animi blanditiis eos?"
type="warning"
id={toastId}
></Toast>
)}
);
};
export default WarningExample;Warning Toast with auto delete off
Used to show warning messages
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { useState } from "react";
import Toast from '@neoKit/toast';
const WarningDeleteExample = () => {
const [warning, setWarning] = useState(false);
const showWarning = () => {
setWarning(true);
setToastId(toastId + 1);
};
return (
<div className="flex gap-3">
<Buttons onClick={() => showInfo()}>Info</Buttons>
</div>
{warning && (
<Toast
title="Warning"
autoDelete ={false}
autoDeleteTime={1500}
description="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque, voluptates delectus sequi cupiditate nihil quos. Minima, magnam pariatur? Minima enim omnis perspiciatis blanditiis maiores, porro provident? Impedit animi blanditiis eos?"
type="warning"
id={toastId}
></Toast>
)}
);
};
export default WarningDeleteExample;