Callback Functions

Callback Functions is Sledge's additional props (for Hydrogen/Next.js) and attributes (for Liquid/Webflow) you can use to execute your own function after Sledge function running.

Let's say you want to show a 'thank you' notification after customer adding a review you can feed your own function to props onAfterAddReview / using event listener like after-add-review.

Code Sample

import { SearchIconWidget } from "@sledge-app/react-instant-search";
 
export default function InstantSearchIconWidget() {
    return (
        <SearchIconWidget
            size='sm'
            onAfterAddWishlist={(state) => {
                if (state) {
                    // if condition is state === true, run your custom code
                } else {
                    // if condition is state === true, run your custom code
                }
            }}
            onAfterRemoveWishlist={(state) => {
                if (state) {
                    // if condition is state === true, run your custom code
                } else {
                    // if condition is state === true, run your custom code
                }
            }}
            onAfterRenderProduct={(state) => {
                if (state) {
                    // if condition is state === true, run your custom code
                } else {
                    // if condition is state === true, run your custom code
                }
            }}
        />
    );
}
List of Callback Functions
Announcement Bar:UpcomingCustom Components