Resolution Detector API¶

API used to get data related to screen resolution breakpoints.

classDiagram
direction LR
    class selectCurrentBreakpoint["selectCurrentBreakpoint$"]
    class selectPreviousBreakpoint["selectPreviousBreakpoint$"]

    ResolutionDetectorApi --> selectCurrentBreakpoint
    ResolutionDetectorApi --> getCurrentBreakpoint
    ResolutionDetectorApi --> selectPreviousBreakpoint
    ResolutionDetectorApi --> getPreviousBreakpoint
    ResolutionDetectorApi --> isXs

    class ResolutionDetectorApi {
        selectCurrentBreakpoint$() Observable~Breakpoint~
        getCurrentBreakpoint() Breakpoint
        selectPreviousBreakpoint$() Observable~Breakpoint|undefined~
        getPreviousBreakpoint() Breakpoint|undefined
        isXs() boolean
    }

    link selectCurrentBreakpoint "../methods/select-current-breakpoint/"
    link getCurrentBreakpoint "../methods/get-current-breakpoint/"
    link selectPreviousBreakpoint "../methods/select-previous-breakpoint/"
    link getPreviousBreakpoint "../methods/get-previous-breakpoint/"
    link isXs "../methods/is-xs/"

Get API¶

To get the Resolution Detector API use its name ResolutionDetectorApi with the getApiSync method.

useStorefront(async (storefront) => {
    const resolutionDetectorApi = storefront.getApiSync('ResolutionDetectorApi');
});

Methods¶

selectCurrentBreakpoint$ - Returns an observable with a currently active breakpoint.
getCurrentBreakpoint - Returns a currently active breakpoint.
selectPreviousBreakpoint$ - Returns an observable with a previously active breakpoint if it exists.
getPreviousBreakpoint - Returns a previously active breakpoint if it exists.
isXs - Returns a boolean indicating whether a current breakpoint is an xs breakpoint or not. Read more about breakpoints in the Breakpoint model page.

Example¶

In this example we make a ResolutionDetectorApi call to get a currently active breakpoint.

    useStorefront(async (storefront) => {
        const resolutionDetectorApi = storefront.getApiSync('ResolutionDetectorApi');

        const currentBreakpoint = resolutionDetectorApi.getCurrentBreakpoint();

        console.log(`Current breakpoint is ${currentBreakpoint.name} which applies to screens of ${currentBreakpoint.value}px width and below.`);
    });

Example¶

In this example we make a ResolutionDetectorApi call to get a previously active breakpoint if it existed.

    useStorefront(async (storefront) => {
        const resolutionDetectorApi = storefront.getApiSync('ResolutionDetectorApi');

        const previousBreakpoint = resolutionDetectorApi.getPreviousBreakpoint();

        if (!previousBreakpoint) return;

        console.log(`Previous breakpoint was ${previousBreakpoint.name} which applied to screens of ${previousBreakpoint.value}px width and below.`);
    });

Example¶

In this example we make a ResolutionDetectorApi call to get an observable with a previously active breakpoint if it exists.

    useStorefront(async (storefront) => {
        const resolutionDetectorApi = storefront.getApiSync('ResolutionDetectorApi');

        const previousBreakpoint$ = resolutionDetectorApi.selectPreviousBreakpoint$();

        previousBreakpoint$.subscribe((breakpoint) => {
            if (!breakpoint) return;

            console.log(`Previous breakpoint was ${breakpoint.name} which applied to screens of ${breakpoint.value}px width and below.`);
        })


    });

Example¶

In this example we make a ResolutionDetectorApi call to see whether we are currently on a mobile resolution or not.

    useStorefront(async (storefront) => {
        const resolutionDetectorApi = storefront.getApiSync('ResolutionDetectorApi');

        const isXs = resolutionDetectorApi.isXs();

        if (isXs) {
            console.log('We are currently on a mobile resolution');
        }
    });

Models reference¶

Breakpoint model.