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

Settings

Member Visibility