Helper Functions

ProComponents provides a comprehensive set of helper functions for common operations like validation, object manipulation, and data transformation.

Validation Functions

isNil

Checks if a value is null or undefined.

import { isNil } from '@ant-design/pro-components';

const value = null;
if (isNil(value)) {
  console.log('Value is null or undefined');
}

value

any

required

The value to check

result

boolean

true if the value is null or undefined, otherwise false

isUrl

Checks if a string is a valid URL.

import { isUrl } from '@ant-design/pro-components';

const link = 'https://example.com';
if (isUrl(link)) {
  console.log('Valid URL');
}

path

string | undefined

required

The string to validate

result

boolean

true if the string is a valid URL starting with http, otherwise false

isImg

Checks if a path points to an image file based on extension.

import { isImg } from '@ant-design/pro-components';

const path = 'avatar.png';
if (isImg(path)) {
  console.log('This is an image');
}

path

string

required

The file path to check

result

boolean

true if the path ends with an image extension (png, jpg, jpeg, svg, webp, gif, bmp)

isBrowser

Checks if the code is running in a browser environment.

import { isBrowser } from '@ant-design/pro-components';

if (isBrowser()) {
  // Safe to use window, document, etc.
  localStorage.setItem('key', 'value');
}

result

boolean

true if running in a browser environment with window, document, and matchMedia available

isDeepEqualReact

Performs deep equality comparison of two values, with React-specific optimizations.

import { isDeepEqualReact } from '@ant-design/pro-components';

const obj1 = { name: 'John', age: 30, tags: ['dev', 'react'] };
const obj2 = { name: 'John', age: 30, tags: ['dev', 'react'] };

if (isDeepEqualReact(obj1, obj2)) {
  console.log('Objects are deeply equal');
}

// With ignored keys
const config1 = { theme: 'dark', _internalId: 123 };
const config2 = { theme: 'dark', _internalId: 456 };

if (isDeepEqualReact(config1, config2, ['_internalId'])) {
  console.log('Equal when ignoring _internalId');
}

any

required

First value to compare

any

required

Second value to compare

ignoreKeys

string[]

Keys to ignore during comparison

result

boolean

true if values are deeply equal, including support for Arrays, Maps, Sets, RegExp, and React elements

Object Manipulation

omitBoolean

Filters out boolean true values from a union type.

import { omitBoolean } from '@ant-design/pro-components';

// Returns the object if it's not true, otherwise undefined
const result = omitBoolean({ name: 'John' }); // { name: 'John' }
const result2 = omitBoolean(true); // undefined
const result3 = omitBoolean(false); // undefined

obj

boolean | T

required

The value to filter

result

T | undefined

Returns the value if it’s not a boolean or is false, otherwise undefined

omitUndefined

Removes properties with undefined values from an object.

import { omitUndefined } from '@ant-design/pro-components';

const data = {
  name: 'John',
  age: undefined,
  city: 'New York',
  country: undefined,
};

const cleaned = omitUndefined(data);
// { name: 'John', city: 'New York' }

obj

T extends Record<string, any>

required

The object to clean

result

OmitUndefined<T>

A new object with all undefined properties removed. Returns undefined if the result is empty.

omitUndefinedAndEmptyArr

Removes properties with undefined values or empty arrays from an object.

import { omitUndefinedAndEmptyArr } from '@ant-design/pro-components';

const data = {
  name: 'John',
  tags: [],
  age: 30,
  hobbies: undefined,
  friends: ['Alice', 'Bob'],
};

const cleaned = omitUndefinedAndEmptyArr(data);
// { name: 'John', age: 30, friends: ['Alice', 'Bob'] }

obj

T extends Record<string, any>

required

The object to clean

result

A new object with undefined values and empty arrays removed

merge

Merges multiple objects into one, with deep merging for nested objects.

import { merge } from '@ant-design/pro-components';

const defaults = { theme: 'light', colors: { primary: 'blue' } };
const userConfig = { colors: { secondary: 'green' } };

const config = merge(defaults, userConfig);
// {
//   theme: 'light',
//   colors: { primary: 'blue', secondary: 'green' }
// }

...objects

any[]

required

Objects to merge (later objects override earlier ones)

result

A new merged object. Nested objects are merged recursively, arrays and other values are replaced.

pickProProps

Filters out ProComponents-specific props from a props object.

import { pickProProps } from '@ant-design/pro-components';

const props = {
  valueType: 'text',
  request: async () => {},
  fieldProps: {},
  className: 'custom',
  style: { color: 'red' },
};

const domProps = pickProProps(props);
// { className: 'custom', style: { color: 'red' } }

props

Record<string, any>

required

The props object to filter

customValueType

boolean

default:"false"

If true, includes valueType and other Pro props in the result

result

Record<string, any>

A new object with ProComponents-specific props removed

pickProFormItemProps

Extracts only Ant Design Form.Item props from a props object.

import { pickProFormItemProps } from '@ant-design/pro-components';

const props = {
  name: 'username',
  label: 'Username',
  rules: [{ required: true }],
  placeholder: 'Enter username',
  onChange: () => {},
};

const formItemProps = pickProFormItemProps(props);
// { name: 'username', label: 'Username', rules: [{ required: true }] }

props

object

required

The props object to filter

result

Record<string, any>

An object containing only valid Ant Design Form.Item props

Data Transformation

transformKeySubmitValue

Transforms object keys and values before form submission.

import { transformKeySubmitValue } from '@ant-design/pro-components';

// Transform specific fields
const formValues = {
  user: {
    name: 'John',
    birthDate: '2000-01-01',
  },
};

const transformed = transformKeySubmitValue(formValues, {
  'user.birthDate': (value) => new Date(value).getTime(),
});
// { user: { name: 'John', birthDate: 946684800000 } }

// Transform with key renaming
const data = { oldKey: 'value' };
const result = transformKeySubmitValue(data, {
  oldKey: (value) => ({ newKey: value }),
});
// { newKey: 'value' }

values

T extends object

required

The object to transform

dataFormatMap

Record<string, SearchTransformKeyFn | DataFormatMapType>

required

Mapping of keys to transformation functions

type SearchTransformKeyFn = (
  value: any,
  key: string | string[],
  allValues: any
) => any

Supports two formats:

Dot notation: 'user.name' for nested paths
Nested objects: { user: { name: transformFn } }

result

The transformed object. Transformation functions can return:

A primitive value to replace the original value
An object to merge into the parent object (removes original key)

stringify

Safely stringifies objects with circular references and BigInt support.

import { stringify } from '@ant-design/pro-components';

const obj = { name: 'John', age: 30 };
obj.self = obj; // Circular reference

const json = stringify(obj);
// Safely handles circular reference

value

any

required

The value to stringify

result

string

JSON string with support for:

Circular references (replaced with 'Magic circle!')
BigInt values
Maximum depth of 4 levels

ID Generation

nanoid

Generates a unique ID using crypto.randomUUID or a fallback.

import { nanoid } from '@ant-design/pro-components';

const id = nanoid();
// 'a3d5e6f7-8901-2345-6789-0abcdef12345' or custom ID

const rowKey = nanoid();
<Table rowKey={() => nanoid()} />

result

string

A unique identifier string. Uses crypto.randomUUID() if available, otherwise generates a custom nano ID.

Function Utilities

runFunction

Executes a value if it’s a function, otherwise returns the value.

import { runFunction } from '@ant-design/pro-components';

// With function
const result1 = runFunction(() => 'computed', 'arg1', 'arg2');
// 'computed'

// With value
const result2 = runFunction('static value', 'arg1', 'arg2');
// 'static value'

// Practical example
const title = runFunction(titleConfig, record, index);

valueEnum

any

required

A value or function to execute

...args

required

Arguments to pass to the function if valueEnum is a function

result

any

The result of calling the function (if it’s a function), or the value itself

Record Key Utilities

recordKeyToString

Converts a record key (which can be a single key or array of keys) to a string.

import { recordKeyToString } from '@ant-design/pro-components';

const key1 = recordKeyToString('user-123');
// 'user-123'

const key2 = recordKeyToString(['user', '123', 'profile']);
// 'user,123,profile'

rowKey

RecordKey (React.Key | React.Key[])

required

A single key or array of keys

result

React.Key

String representation of the key. Arrays are joined with commas.

editableRowByKey

Updates, adds, or deletes a row in a data array by key, supporting nested children.

import { editableRowByKey } from '@ant-design/pro-components';

const data = [
  { id: 1, name: 'John', children: [{ id: 2, name: 'Jane' }] },
];

// Update a row
const updated = editableRowByKey(
  {
    data,
    getRowKey: (row) => row.id,
    key: 2,
    row: { id: 2, name: 'Jane Doe' },
    childrenColumnName: 'children',
  },
  'update'
);

// Delete a row
const deleted = editableRowByKey(
  {
    data,
    getRowKey: (row) => row.id,
    key: 2,
    row: {},
    childrenColumnName: 'children',
  },
  'delete'
);

keyProps

object

required

Configuration object

keyProps.data

RecordType[]

required

Array of records

keyProps.getRowKey

GetRowKey<RecordType>

required

Function to get row key

keyProps.key

RecordKey

required

Key of the row to modify

keyProps.row

RecordType

required

Row data

keyProps.childrenColumnName

string

required

Name of the children property

action

'update' | 'top' | 'delete'

required

Action to perform:

'update': Update existing row or add at bottom
'top': Add new row at top
'delete': Remove the row

result

RecordType[]

Updated array with the modification applied

Components API

Form Fields API

Utilities

Validation Functions

isNil

isUrl

isImg

isBrowser

isDeepEqualReact

Object Manipulation

omitBoolean

omitUndefined

omitUndefinedAndEmptyArr

merge

pickProProps

pickProFormItemProps

Data Transformation

transformKeySubmitValue

stringify

ID Generation

nanoid

Function Utilities

runFunction

Record Key Utilities

recordKeyToString

editableRowByKey

Build docs developers (and LLMs) love

Components API

Form Fields API

Utilities

​Validation Functions

​isNil

​isUrl

​isImg

​isBrowser

​isDeepEqualReact

​Object Manipulation

​omitBoolean

​omitUndefined

​omitUndefinedAndEmptyArr

​merge

​pickProProps

​pickProFormItemProps

​Data Transformation

​transformKeySubmitValue

​stringify

​ID Generation

​nanoid

​Function Utilities

​runFunction

​Record Key Utilities

​recordKeyToString

​editableRowByKey

Build docs developers (and LLMs) love

Validation Functions

isNil

isUrl

isImg

isBrowser

isDeepEqualReact

Object Manipulation

omitBoolean

omitUndefined

omitUndefinedAndEmptyArr

merge

pickProProps

pickProFormItemProps

Data Transformation

transformKeySubmitValue

stringify

ID Generation

nanoid

Function Utilities

runFunction

Record Key Utilities

recordKeyToString

editableRowByKey