Getting Started
  • Installation
Components
  • Alert
  • Badge
  • Button
  • Card
  • Checkbox
  • Drawer
  • Dropdown
  • Input
  • Modal
  • Overlay
  • Radio
  • Switch
  • Tabs
  • Tag
  • Toast
Advanced Components
  • Searchable Select
  • Datatable (Beta)
Tag
Searchable Select

    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.

    NameTypeDefaultDescription
    firefunctionnullTrigger function of the component
    PToastProviderprovidernullNeed for toast component hook
    propertiesfire function 1nd parameter{type: 'info'}Fire function properties
    optionsfire function 2nd parameter{position:'top-end', timeout:3000}Fire function options