Function useSizeOptions

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

Preact hook that import 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/preact"
import { defaultConfig, sizes } from "../config"

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

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