Function useFacet

useFacet(
    facet: SearchTermsFacet,
    options?: UseFacetOptions,
): {
    active: boolean;
    selectedFiltersCount: number;
    toggleActive: () => void;
    toggleProductFilter: (
        field: string,
        value: string,
        active: boolean,
    ) => Promise<void>;
}

Preact hook that provides facet state to the component.

Parameters

facet: SearchTermsFacet
Optionaloptions: UseFacetOptions

Returns {
    active: boolean;
    selectedFiltersCount: number;
    toggleActive: () => void;
    toggleProductFilter: (
        field: string,
        value: string,
        active: boolean,
    ) => Promise<void>;
}

active: boolean
Active value
selectedFiltersCount: number
Selected filters count
toggleActive: () => void
Toggle active function
toggleProductFilter: (field: string, value: string, active: boolean) => Promise<void>
Toggle product filter function

Example

import { useFacet } from '@nosto/search-js/preact/hooks'

export default () => {
    const { active, selectedFiltersCount, toggleActive, toggleProductFilter } = useFacet(facet)
    return (
        <li class={`ns-sidebar-dropdown ${active ? "ns-active" : ""}`}>
            <span
                onClick={toggleActive}
            >
                <span>{facet.name}</span>
                {selectedFiltersCount > 0 && (
                    <span>{selectedFiltersCount}</span>
                )}
            </span>
            <div>
                <ul>
                    {facet.data?.map(value => (
                        <li key={value.value}>
                            <label>
                                {value.value}
                                <input
                                    type="checkbox"
                                    checked={value.selected}
                                    onChange={e => {
                                        e.preventDefault()
                                        toggleProductFilter(
                                            facet.field,
                                            value.value,
                                            !value.selected
                                        )
                                    }}
                                />
                            </label>
                            <span>{value.count}</span>
                        </li>
                    ))}
                </ul>
            </div>
        </li>
    );
}

Function useFacet

Parameters

Returns { active: boolean; selectedFiltersCount: number; toggleActive: () => void; toggleProductFilter: ( field: string, value: string, active: boolean, ) => Promise<void>;}

active: boolean

selectedFiltersCount: number

toggleActive: () => void

toggleProductFilter: (field: string, value: string, active: boolean) => Promise<void>

Example

Settings

Returns {
active: boolean;
selectedFiltersCount: number;
toggleActive: () => void;
toggleProductFilter: (
field: string,
value: string,
active: boolean,
) => Promise<void>;
}