Presto

RangeFormatter
This is a React component

Source
import { RangeFormatter } from "@prestojs/ui";
RangeFormatter(props)

Formats a range.

If no value is provided blankLabel is returned.

The lower and upper values are rendered using boundsFormatter. If boundsFormatter is not provided then the value will be returned as is. You can pass extra props to the formatters specifically using boundsFormatterProps (both upper and lower), lowerFormatterProps (lower only) and upperFormatterProps (upper only).

This is the default formatter used for DateRangeField, DateTimeRangeField, FloatRangeField and IntegerRangeField.

ParameterTypeDescription
props.blankLabelReactNode

What to render when value is null or undefined

Defaults to null

props.boundsFormatterBoundsFormatter

The formatter to use to render the lower and upper values in value.

If not specified then defaults to returning the value directly.

props.boundsFormatterPropsBoundsFormatter Props

Any props to pass through to boundsFormatter.

props.lowerFormatterPropsBoundsFormatter Props

Any props to pass through to the lower boundsFormatter. If boundsFormatter is also passed then both will be passed through with lowerFormatterProps taking precedence.

props.separatorReact.ReactNode

The separator to render between the lower and upper values. Defaults to ~.

props.upperFormatterPropsBoundsFormatter Props

Any props to pass through to the upper boundsFormatter. If boundsFormatter is also passed then both will be passed through with upperFormatterProps taking precedence.

props.value
RangeValue
|null

The range value. This should be an object with a lower and upper key representing the lower and upper bounds of the range respectively.

Examples