Function useSizeOptions

useSizeOptions(
    sizes: number[],
    serpSize: number,
): {
    from: number;
    handleSizeChange: (size: number) => void;
    size: number;
    sizeOptions: number[];
    to: number;
    total: number;
}

Preact hook that provides size options to the component.

Parameters

sizes: number[]
serpSize: number

Returns {
    from: number;
    handleSizeChange: (size: number) => void;
    size: number;
    sizeOptions: number[];
    to: number;
    total: number;
}

from: number
from value
handleSizeChange: (size: number) => void
Should be called when size is changed
size: number
size value
sizeOptions: number[]
Array of size options
to: number
to value
total: number
total value

Example

import { useSizeOptions } from "@nosto/search-js/preact"
import { defaultConfig, sizes } from "../config"

export default () => {
  const options = useSizeOptions(sizes, defaultConfig.serpSize)
  const { from, to, total, size, sizeOptions, handleSizeChange } = options

  return (
   <div>
     <div>
       {from} - {total < to ? total : to} of {total} items
     </div>
      {sizeOptions.length > 0 && (
       <div>
         <select
           value={size}
           onChange={e => handleSizeChange(e.target.value)}
         >
           {sizeOptions.map(v => (
             <option value={v}>{v} items per page</option>
           ))}
         </select>
       </div>
     )}
   </div>
   )
}

Function useSizeOptions

Parameters

Returns { from: number; handleSizeChange: (size: number) => void; size: number; sizeOptions: number[]; to: number; total: number;}

from: number

handleSizeChange: (size: number) => void

size: number

sizeOptions: number[]

to: number

total: number

Example

Settings

Returns {
from: number;
handleSizeChange: (size: number) => void;
size: number;
sizeOptions: number[];
to: number;
total: number;
}