Function useFacet

Example

import { useFacet } from '@nosto/preact'

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>
    );
}
Copy