Toast

Toast #

Standard toast component for user interaction. Use PToastProvider provider for access usePToast hook from children components

import {PToastProvider, usePToast} from "pearkit;

<PToastProvider>
    // access usePToast hook,
</PToastProvider>

Basic #

This is standard use of the toast component. Use usePToast hook and access the fire function.

const toast = usePToast();

    const showToast = () => {
        toast.fire({
            title: 'Success Toast Title',
            message: 'Success toast message...'
        });
    }
    
<PButton onClick={showToast} label="Show Info Toast"/>

Options #

For toast options, config is written to the second parameter of the fire method. Here you can give 4 different values to the position key in the config. These values are top-start, top-end (default), bottom-end and bottom-start. And you can give number values to the timeout key in the config. Note: Since there is only one provider here, instant changes to the config file affect all toasts.

const toast = usePToast();

    const showToast = (type) => {
        toast.fire({
            title: 'Success Toast Title',
            message: 'Success toast message...',
            type
        },{
            position: 'bottom-end',
            timeout: 1000
        });
    }
    
<PButton onClick={() => showToast('info')} label="Show Info Toast"/>

Status #

You can handle 4 different situations here. The values are info (default), error, success and warning.

const toast = usePToast();

    const showToast = (type) => {
        toast.fire({
            title: 'Success Toast Title',
            message: 'Success toast message...',
            type // 'error', 'success', 'warning' and 'info'
        });
    }
    
<PButton color={"blue"} onClick={() => showToast('info')} label="Show Info Toast"/>
<PButton color={"red"} onClick={() => showToast('error')} label="Show Error Toast"/>
<PButton color={"yellow"} onClick={() => showToast('warning')} label="Show Warning Toast"/>
<PButton color={"green"} onClick={() => showToast('success')} label="Show Success Toast"/>

Accessibility (Not Ready Yet) #

None

Api #

Here you can see all the working features for the toast component.

Name	Type	Default	Description
fire	function	null	Trigger function of the component
PToastProvider	provider	null	Need for toast component hook
properties	fire function 1nd parameter	{type: 'info'}	Fire function properties
options	fire function 2nd parameter	{position:'top-end', timeout:3000}	Fire function options

Tag

Searchable Select