Function useRange

Returns
    | {
        active: false;
        max: 0;
        min: 0;
        range: readonly [0, 0];
        toggleActive: () => void;
        updateRange: () => void;
    }
    | {
        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: false;
      max: 0;
      min: 0;
      range: readonly [0, 0];
      toggleActive: () => void;
      updateRange: () => void;
  }
• {
      active: boolean;
      max: number;
      min: number;
      range: number[];
      toggleActive: () => void;
      updateRange: (__namedParameters: RangeProps) => void;
  }

  • 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

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