Skip to content
For Astro

Range Generators

A range generator is a set of Generators that allow you to generate a set of numbers. They require two parameters a start and stop. Step and inclusive are passed as the third parameter as an object that uses there names.

They generate numbers that are in-between the start and the stop based on the step. If the start is less than the stop the numbers in-between are ones increased by the step.
If the start is less than the stop the numbers in-between will ones decreased up by the step.

By default the last number is not included by the calculation.
To change this just set inclusive: to true.

Range

    range(start:number,stop:number,{step?:number, inclusive?:true}):Generator<number,void,number>

A generator that will instantly follow the rules stated in the introduction. This function automatically produces values in Astro.

Uses cases In Astro

Iterate Range

type IterateRangeCallback<U> = (value: number, info: IterationInfo) => U


type IterateRangeOptions = {
    start: number
    stop: number
    step?: number
    inclusive?:true
}


iterateRange<U>(
    callback: IterateRangeCallback<U>,
    options: IterateRangeOptions
):AsyncGenerator<number,void>

While range is nice it's problem is that as a developer. Using HTML and creating conditions on what to do with the value that a range produces is cumbersome. That is where iterateRange() comes in. It's a generator that. takes in a callback then a object. That specifies the start,stop and ,step.

Usage

{
  iterateRange(
    (value, info) => (
      <div style={{ backgroundColor: info.isFirst ? 'blue' : 'green' }}>
        {value}
      </div>
    ),
    { start: 3, stop: 15, step: 3 },
  );
}