UNPKG

@solid-primitives/range

Version:

Control Flow Primitives for displaying given number or a number range of elements.

46 lines (45 loc) 2.39 kB
import { type Accessor, type JSX } from "solid-js"; import { type RangeProps } from "./common.js"; /** * Reactively maps a number range of specified `stop`, `to` and `step`, with a callback function - underlying helper for the `<IndexRange>` control flow. * @param getStart number accessor of the start of the range * @param getTo number accessor of the end of the range *(not included in the range)* * @param getStep number accessor of the difference between two points in the range *(negative step value depends on the `to` being greater/smaller than `start`, not this argument)* * @param mapFn reactive function used to create mapped output item array, number value is available as a signal. * @param options a fallback for when the input list is empty or missing * @returns mapped input array signal * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/range#indexRange * @example * ```tsx * const [to, setTo] = createSignal(5) * const mapped = indexRange(() => 0, to, () => 0.5, number => { * const [value, setValue] = createSignal(number()); * createEffect(() => handleNewNumber(number())) * return value * }) * mapped() // => [0, 0.5, 1, 1.5, 2...] * setTo(3) // changes the output array, mapping only added indexes * ``` */ export declare function indexRange<T>(getStart: Accessor<number>, getTo: Accessor<number>, getStep: Accessor<number>, mapFn: (n: Accessor<number>) => T, options?: { fallback?: Accessor<T>; }): Accessor<T[]>; /** * Creates a list of elements by mapping a number range of specified `start`, `to`, and `step`. * @param start beginning of the number range *(defaults to 0)* * @param to end *(not included)* of the number range * @param step difference between two points in the range *(negative step value depends on the `to` being greater/smaller then `start`, not this argument)* *(defaults to 1)* * @param fallback element returned when the range size is 0 * @param children render function, recives number value as a signal * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/range#IndexRange * @example * ```tsx * <IndexRange start={2} to={14} step={0.5}> * {n => <div>{n()}</div>} * </IndexRange> * ``` */ export declare function IndexRange<T>(props: RangeProps & { fallback?: T; children: ((number: Accessor<number>) => T) | T; }): JSX.Element;