diff --git a/docs/framework/react/api/basic.md b/docs/framework/react/api/basic.md index 6a2dd20..9c475a9 100644 --- a/docs/framework/react/api/basic.md +++ b/docs/framework/react/api/basic.md @@ -5,9 +5,10 @@ menu: API --- ## Examples + Want to skip to the implementation? Check out these examples: -- [basic](../../examples/react/basic) +- [basic](https://tanstack.com/ranger/latest/docs/framework/react/examples/basic) The API below described how to use the **basic** features. @@ -18,6 +19,7 @@ The API below described how to use the **basic** features. ```tsx values: ReadonlyArray ``` + **Required** The current value (or values) for the range. ### min @@ -25,6 +27,7 @@ values: ReadonlyArray ```tsx min: number ``` + **Required** The minimum limit for the range. ### max @@ -32,6 +35,7 @@ min: number ```tsx max: number ``` + **Required** The maximum limit for the range. ### stepSize @@ -39,6 +43,7 @@ max: number ```ts stepSize: number ``` + **Required** The distance between selectable steps. ### onChange @@ -46,23 +51,35 @@ stepSize: number ```ts onChange: (instance: Ranger) => void ``` + A function that is called when the handle is released. ## API ### handles + ```tsx -handles: ReadonlyArray<{value: number; isActive: boolean; onKeyDownHandler(event): function; onMouseDownHandler(event): function; onTouchStart(event): function}> +handles: ReadonlyArray<{ + value: number + isActive: boolean + onKeyDownHandler(event): function + onMouseDownHandler(event): function + onTouchStart(event): function +}> ``` + Handles to be rendered. Each `handle` has the following props: - - `value: number` - The current value for the handle. - - `isActive: boolean` - Denotes if the handle is currently being dragged. - - `onKeyDownHandler(event): func` - - `onMouseDownHandler(event): func` - - `onTouchStart(event): func` + +- `value: number` - The current value for the handle. +- `isActive: boolean` - Denotes if the handle is currently being dragged. +- `onKeyDownHandler(event): func` +- `onMouseDownHandler(event): func` +- `onTouchStart(event): func` ### activeHandleIndex + ```tsx activeHandleIndex: null | number ``` + The zero-based index of the handle that is currently being dragged, or `null` if no handle is being dragged. diff --git a/docs/framework/react/api/custom-steps.md b/docs/framework/react/api/custom-steps.md index 71ec7b3..ad88569 100644 --- a/docs/framework/react/api/custom-steps.md +++ b/docs/framework/react/api/custom-steps.md @@ -5,9 +5,10 @@ menu: API --- ## Examples + Want to skip to the implementation? Check out these examples: -- [custom-steps](../examples/custom-steps) +- [custom-steps](https://tanstack.com/ranger/latest/docs/framework/react/examples/custom-steps) The API below described how to use the **custom-steps** features. @@ -18,6 +19,7 @@ The API below described how to use the **custom-steps** features. ```ts steps: Array ``` + An array of custom steps to use. This will override `stepSize` ### ticks @@ -25,15 +27,20 @@ An array of custom steps to use. This will override `stepSize` ```ts ticks: Array ``` + An array of custom ticks to use. This will override `tickSize` ## API ### getTicks + ```tsx -getTicks: () => ReadonlyArray<{value: number; key: number; percentage: number}> +getTicks: () => + ReadonlyArray<{ value: number; key: number; percentage: number }> ``` + Ticks to be rendered. Each `tick` has the following props: - - `value: number` - The tick number to be displayed - - `key: number` - The key of a tick - - `percentage: number` - Percentage value of where tick should be placed on ranger + +- `value: number` - The tick number to be displayed +- `key: number` - The key of a tick +- `percentage: number` - Percentage value of where tick should be placed on ranger diff --git a/docs/framework/react/api/custom-styles.md b/docs/framework/react/api/custom-styles.md index 181c80b..c8dbbed 100644 --- a/docs/framework/react/api/custom-styles.md +++ b/docs/framework/react/api/custom-styles.md @@ -5,18 +5,22 @@ menu: API --- ## Examples + Want to skip to the implementation? Check out these examples: -- [custom-styles](../examples/custom-styles) +- [custom-styles](https://tanstack.com/ranger/latest/docs/framework/react/examples/custom-styles) The API below described how to use the **custom-steps** features. ## API ### getSegments + ```tsx -getSegments: () => ReadonlyArray<{left: number; width: number}> +getSegments: () => ReadonlyArray<{ left: number; width: number }> ``` + Segments to be rendered. Each `segment` has the following props: - - `left: number` - Percentage value of where segment should start on ranger - - `width: number` - Percentage value of segment width + +- `left: number` - Percentage value of where segment should start on ranger +- `width: number` - Percentage value of segment width diff --git a/docs/framework/react/api/logarithmic-interpolator.md b/docs/framework/react/api/logarithmic-interpolator.md index 6473d74..e972b75 100644 --- a/docs/framework/react/api/logarithmic-interpolator.md +++ b/docs/framework/react/api/logarithmic-interpolator.md @@ -5,9 +5,10 @@ menu: API --- ## Examples + Want to skip to the implementation? Check out these examples: -- [logarithmic-interpolator](../examples/logarithmic-interpolator) +- [logarithmic-interpolator](https://tanstack.com/ranger/latest/docs/framework/react/examples/logarithmic-interpolator) The API below described how to use the **logarithmic-interpolator** features. @@ -23,6 +24,8 @@ interpolator: { getValueForClientX: (clientX: number, trackDims: object, min: number, max: number): number; } ``` + The Interpolator to use. Defaults to the bundled linear-scale interpolator - - `getPercentageForValue` - Takes the value & range and returns a percentage [0, 100] where the value sits from left to right. - - `getValueForClientX`- Takes the clientX (offset from the left edge of the ranger) along with the dimensions and range settings and transforms a pixel coordinate back into a value. + +- `getPercentageForValue` - Takes the value & range and returns a percentage [0, 100] where the value sits from left to right. +- `getValueForClientX`- Takes the clientX (offset from the left edge of the ranger) along with the dimensions and range settings and transforms a pixel coordinate back into a value. diff --git a/docs/framework/react/api/update-on-drag.md b/docs/framework/react/api/update-on-drag.md index b55c048..57fc71f 100644 --- a/docs/framework/react/api/update-on-drag.md +++ b/docs/framework/react/api/update-on-drag.md @@ -5,9 +5,10 @@ menu: API --- ## Examples + Want to skip to the implementation? Check out these examples: -- [update-on-drag](../../examples/react/update-on-drag) +- [update-on-drag](https://tanstack.com/ranger/latest/docs/framework/react/examples/update-on-drag) The API below described how to use the **update-on-drag** features. @@ -18,4 +19,5 @@ The API below described how to use the **update-on-drag** features. ```ts onDrag: (instance: Ranger) => void ``` + A function that is called when a handled is dragged