# useSum

*Category:* Utilities
*Section:* Data aggregation hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useSum
*Captured:* 2026-04-27T14:59:47.578Z

The useSum hook is a versatile utility for calculating the total of numeric, localized values within a list of objects—particularly useful for rendering totals in table footers, dashboards, or KPIs.

## useSum

It supports locale-aware number parsing (e.g. 1.234,50 € or 2 500,75 kg)

### Example: Example 1

3.930,75 km
5.197 €
1860min
31h
185 km

#### React (tsx)

```tsx
import { FormattedNumber, IntlProvider } from 'react-intl';

import useSum from '@rio-cloud/rio-uikit/useSum';

export default () => {
    const weightSum = useSum(deliveries, 'shipment.weight', { locale: 'de-DE' });
    const valueSum = useSum(deliveries, 'shipment.value', { locale: 'de-DE' });

    const durationSum = useSum(deliveries, 'shipment.duration');

    const mileage = useSum(deliveries, 'vehicle.mileage');

    return (
        <IntlProvider locale='de-DE'>
            <ul>
                <li>
                    <FormattedNumber
                        value={weightSum}
                        minimumFractionDigits={0}
                        maximumFractionDigits={2}
                        style='unit'
                        unit='kilometer'
                    />
                </li>
                <li>
                    <FormattedNumber
                        value={valueSum}
                        style='currency'
                        currency='EUR'
                        minimumFractionDigits={0}
                        maximumFractionDigits={0}
                    />
                </li>
                <li>{durationSum}min</li>
                <li>
                    <FormattedNumber value={durationSum / 60} maximumFractionDigits={1} />h
                </li>
                <li>
                    <FormattedNumber value={mileage} maximumFractionDigits={0} style='unit' unit='kilometer' />
                </li>
            </ul>
        </IntlProvider>
    );
};

const deliveries = [
    {
        id: 'D-1001',
        vehicle: {
            mileage: 97.5,
        },
        shipment: {
            weight: '1.200,5 kg',
            value: '2.345,50 €',
            duration: 90, // raw minutes
        },
    },
    {
        id: 'D-1002',
        vehicle: {
            mileage: 10,
        },
        shipment: {
            weight: '980,25 kg',
            value: '1,000.75€',
            duration: 150, // raw minutes
        },
    },
    {
        id: 'D-1003',
        vehicle: {
            mileage: 56,
        },
        shipment: {
            weight: '750kg',
            value: 850,
            duration: 1440, // raw minutes
        },
    },
    {
        id: 'D-1004',
        vehicle: {
            mileage: 21,
        },
        shipment: {
            weight: '1.000 kg',
            value: '2.000,00 €',
            duration: 180, // raw minutes
        },
    },
];
```

#### HTML (html)

```html
<ul>
    <li>3.930,75 km</li>
    <li>5.197&nbsp;€</li>
    <li>1860min</li>
    <li>31h</li>
    <li>185 km</li>
</ul>
```

#### Props: Options for the `useSum` hook

### Options for the `useSum` hook

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| items | unknown[] | — | The array of objects to aggregate values from. |
| path | string | — | Dot-separated path to the numeric value in each object. |
| options | object | — | Optional configuration for parsing behavior. |
| └locale | string | "en-GB" | Locale string used to parse localized number formats. Affects how grouping and decimal separators are interpreted. |

#### Props: Return value of the `useSum` hook

### Return value of the `useSum` hook

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| sum | number | — | The total sum of all parsed values from the provided path in the given item list. |