# useCustomProperties

**Kind:** Function

A hook for integrating configuration settings for your block with the Interface Designer properties
panel. Under the hood, this uses `GlobalConfig` to store the custom property values.

Returns an object with:
- `customPropertyValueByKey`: an object mapping custom property keys to their current value.
- `errorState`: an object with an `error` property if there was an error setting the custom properties

```js
import {useCustomProperties} from '@airtable/blocks/interface/ui';

function getCustomProperties(base: Base) {
    const table = base.tables[0];
    const isNumberField = (field: {id: FieldId, config: FieldConfig}) => field.config.type === FieldType.NUMBER;
    return [
        {key: 'title', label: 'Title', type: 'string', defaultValue: 'Chart'},
        {key: 'xAxis', label: 'X-axis', type: 'field', table, shouldFieldBeAllowed: isNumberField},
        {key: 'yAxis', label: 'Y-axis', type: 'field', table, shouldFieldBeAllowed: isNumberField},
        {key: 'color', label: 'Color', type: 'enum', possibleValues: [{value: 'red', label: 'Red'}, {value: 'blue', label: 'Blue'}, {value: 'green', label: 'Green'}], defaultValue: 'red'},
        {key: 'showLegend', label: 'Show Legend', type: 'boolean', defaultValue: true},
    ];
}

function MyApp() {
    const {customPropertyValueByKey, errorState} = useCustomProperties(getCustomProperties);
}
```

**Parameters:**
- `getCustomProperties` (`object`) — A function that returns an array of `BlockPageElementCustomProperty`.

**Returns:** `object`