react-poptart

Poptart Configurator

Global Configurator

More Examples

Inverted Poptart

Inverted poptarts swap the background and foreground colors.

poptart.push({
    message: 'This is an inverted poptart.',
    type: 'success',
    poptartStyle: 'inverted',
});

Promise Poptart

Promise poptarts allow you to show a loading spinner while waiting for a promise to resolve.

poptart.promise('Saving user data...', {
    promise: new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        }, 2000);
    }),
    successMessage: 'User data saved successfully!',
    errorMessage: 'Failed to save user data.',
});

Alert Configurator

Input Configuration

Alert Examples

Success Alert

This is a success alert.

poptart.alert({
    title: 'Success',
    message: 'This is a success alert.',
    type: 'success',
});

Error Alert

This is an error alert.

poptart.alert({
    title: 'Error',
    message: 'This is an error alert.',
    type: 'error',
});

Warning Alert

This is a warning alert.

poptart.alert({
    title: 'Warning',
    message: 'This is a warning alert.',
    type: 'warning',
});

Info Alert

This is an info alert.

poptart.alert({
    title: 'Info',
    message: 'This is an info alert.',
    type: 'info',
});

Alert with Custom Button

This alert has a custom button that triggers a download.

poptart.alert({
    title: 'Download File',
    message: 'Click the button below to start the download.',
    type: 'info',
    showConfirmButton: false,
    showCancelButton: false,
    additionalButtons: [
        {
            label: 'Download',
            backgroundColor: '#007BFF',
            onClick: () => {
                poptart.dismissAlert();
                poptart.promise('Downloading...', {
                    promise: new Promise((resolve, reject) => {
                        setTimeout(() => {
                            // Simulating download success or failure
                            Math.random() > 0.5 ? resolve() : reject();
                        }, 3000);
                    }),
                    successMessage: 'File downloaded successfully!',
                    errorMessage: 'Download failed. Please try again.',
                });
            },
        },
    ],
});

Alert with Custom Input

This alert has a custom input field that must be validated before submitting.

poptart.alert({
    title: 'Confirm Action',
    message: 'Are you sure you want to delete?',
    type: 'warning',
    showConfirmButton: true,
    showCancelButton: true,
    input: {
        type: 'text',
        placeholder: 'Type DELETE to continue',
        required: true,
        validationCallback: (value) => {
            if (value !== 'DELETE') {
                return 'You must enter DELETE to continue.';
            }
            return true;
        },
    },
    confirmButtonLabel: 'Submit',
    confirmButtonCallback: (value) => {
        poptart.dismissAlert();
        poptart.promise('Deleting...', {
            promise: new Promise((resolve) => {
                setTimeout(() => {
                    resolve();
                }, 2000);
            }),
            successMessage: 'Deleted successfully!',
            errorMessage: 'Failed to delete.',
        });
    },
    cancelButtonLabel: 'Cancel',
});