Skip to main content
Version: 3.xx.xx

useRadioGroup

useRadioGroup hook allows you to manage an Ant Design Radio.Group component when records in a resource needs to be used as radio options.

Usage​

We will demonstrate how to get data at /languages endpoint from the https://api.fake-rest.refine.dev REST API.

https://api.fake-rest.refine.dev/languages
{
[
{
id: 1,
title: "Turkish",
},
{
id: 2,
title: "English",
},
{
id: 3,
title: "German",
},
];
}
pages/posts/create.tsx
import { Form, Radio, useRadioGroup } from "@pankod/refine-antd";

export const PostCreate = () => {
const { radioGroupProps } = useRadioGroup<ILanguage>({
resource: "languages",
});

return (
<Form>
<Form.Item label="Languages" name="languages">
<Radio.Group {...radioGroupProps} />
</Form.Item>
</Form>
);
};

interface ILanguage {
id: number;
title: string;
}
Radio group

All we have to do is pass the radioGroupProps it returns to the <Radio.Group> component.

useRadioGroup uses the useList hook for fetching data. Refer to Ant Design useList hook for details. β†’

Options​

resource​

const { radioGroupProps } = useRadioGroup({
resource: "languages",
});

resource property determines API resource endpoint to fetch records from dataProvider. It returns properly configured options values for radio buttons.

Refer to the Ant Design's Radio.Group component documentation for detailed info on options. β†’

defaultValue​

const { selectProps } = useRadioGroup({
resource: "languages",
defaultValue: 1,
});

The easiest way to selecting a default value for an radio button field is by passing in defaultValue.

optionLabel and optionValue​

const { radioGroupProps } = useRadioGroup({
resource: "languages",
optionLabel: "title",
optionValue: "id",
});

optionLabel and optionValue allows you to change the values and appearances of your options. Default values are optionLabel = "title" and optionValue = "id".

tip

Supports use with optionLabel and optionValue Object path syntax.

const { options } = useSelect({
resource: "categories",
optionLabel: "nested.title",
optionValue: "nested.id",
});

filters​

const { radioGroupProps } = useRadioGroup({
resource: "languages",
filters: [
{
field: "title",
operator: "eq",
value: "German",
},
],
});

filters allows us to add filters while fetching the data. For example, if you want to list only the titles that are equal to "German" records.

sort​

const { radioGroupProps } = useRadioGroup({
resource: "languages",
sort: [
{
field: "title",
order: "asc",
},
],
});

sort allows us to sort the options. For example, if you want to sort your list according to title by ascending.

fetchSize​

const { selectProps } = useRadioGroup({
resource: "languages",
fetchSize: 20,
});

Amount of records to fetch in radio group buttons.

queryOptions​

const { radioGroupProps } = useRadioGroup({
resource: "languages",
queryOptions: {
onError: () => {
console.log("triggers when on query return Error");
},
},
});

useQuery options can be set by passing queryOptions property.

API Reference​

Properties​

PropertyDescriptionTypeDefault
resource
Required
Resource name for API data interactionsstring
defaultValueSets the default valueBaseKey
optionValueSets the option's valuestring"id"
optionLabelSets the option's label valuestring"title"
filtersAdds filters while fetching the dataCrudFilters
sortAllows us to sort the optionsCrudSorting
fetchSizeAmount of records to fetch in radio group buttons.numberundefined
queryOptionsreact-query useQuery options UseQueryOptions<GetListResponse<TData>, TError>
metaDataMetadata query for dataProviderMetaDataQuery{}
liveModeWhether to update data automatically ("auto") or not ("manual") if a related live event is received. The "off" value is used to avoid creating a subscription."auto" | "manual" | "off""off"
liveParamsParams to pass to liveProvider's subscribe method if liveMode is enabled.{ ids?: string[]; [key: string]: any; }undefined
onLiveEventCallback to handle all related live events of this hook.(event: LiveEvent) => voidundefined

Return values​

PropertyDescriptionType
radioGroupPropsAnt design radio group propsRadio Group
queryResultResults of the query of a recordQueryObserverResult<{ data: TData }>

Live StackBlitz Example​