@nosto/search-js
    Preparing search index...

    Function useRange

    • A hook that returns range information and functions to update the range.

      Parameters

      • id: string

        The identifier for the specific range facet.

      Returns {
          active: boolean;
          max: number;
          min: number;
          range: number[];
          toggleActive: () => void;
          updateRange: (__namedParameters: RangeProps) => void;
      }

      An object containing range information, active state, and functions to update the range.

      • active: boolean

        Is the range filter active

      • max: number

        Max value

      • min: number

        Min value

      • range: number[]

        Range value

      • toggleActive: () => void

        Toggle active state function

      • updateRange: (__namedParameters: RangeProps) => void

        Update range function

      General usage with useRange:

      import { useRange } from "@nosto/search-js/preact/hooks";
      import { useState } from "react";

      const Component = ({ facetId }) => {
        const { min, max, range, active, toggleActive, updateRange } = useRange(facetId);

        return (
          <div>
            <button onClick={() => toggleActive()}>
              {active ? "Hide" : "Show"} Range Filter
            </button>
            {active && (
              <div>
                Current Range: {range[0]} to {range[1]}
                <button onClick={() => updateRange([min, max])}>Reset Range</button>
              </div>
            )}
          </div>
        );
      };

    Settings

    Member Visibility