Function useProgressBar

packages/react-aria/src/progress/useProgressBar.ts:76–117

(props: AriaProgressBarProps)

 * over time.
 */
export function useProgressBar(props: AriaProgressBarProps): ProgressBarAria {
  let {
    value = 0,
    minValue = 0,
    maxValue = 100,
    valueLabel,
    isIndeterminate,
    formatOptions = {
      style: 'percent'
    }
  } = props;

  let domProps = filterDOMProps(props, {labelable: true});
  let {labelProps, fieldProps} = useLabel({
    ...props,
    // Progress bar is not an HTML input element so it
    // shouldn't be labeled by a <label> element.
    labelElementType: 'span'
  });

  value = clamp(value, minValue, maxValue);
  let range = maxValue - minValue;
  let percentage = range === 0 ? 0 : (value - minValue) / range;
  let formatter = useNumberFormatter(formatOptions);

  if (!isIndeterminate && !valueLabel) {
    let valueToFormat = formatOptions.style === 'percent' ? percentage : value;
    valueLabel = formatter.format(valueToFormat);
  }

  return {
    progressBarProps: mergeProps(domProps, {
      ...fieldProps,
      'aria-valuenow': isIndeterminate ? undefined : value,
      'aria-valuemin': minValue,
      'aria-valuemax': maxValue,
      'aria-valuetext': isIndeterminate ? undefined : (valueLabel as string),
      role: 'progressbar'
    }),
    labelProps
  };
}