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.
{
[
{
id: 1,
title: "Turkish",
},
{
id: 2,
title: "English",
},
{
id: 3,
title: "German",
},
];
}
import { useRadioGroup } from "@refinedev/antd";
import { Form, Radio } from "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;
}
All we have to do is pass the radioGroupProps
it returns to the <Radio.Group>
component.
useRadioGroup
uses the useList
hook for fetching data.
For more information, refer to the Ant Design's
useList
hook documentation →
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.
If you have multiple resources with the same name, you can pass the identifier
instead of the name
of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the name
of the resource defined in the <Refine/>
component.
For more information, refer to the
identifier
section of the<Refine/>
component documentation →
For more information, refer to the Ant Design's
Radio.Group
component documentation →
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"
.
Supports use with optionLabel
and optionValue
Object path syntax.
const { options } = useSelect({
resource: "categories",
optionLabel: "nested.title",
optionValue: "nested.id",
});
filters
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":
const { radioGroupProps } = useRadioGroup({
resource: "languages",
filters: [
{
field: "title",
operator: "eq",
value: "German",
},
],
});
sorters
sorters
allows us to sort the options
. For example, if you want to sort your list according to title
by ascending:
const { radioGroupProps } = useRadioGroup({
resource: "languages",
sorters: [
{
field: "title",
order: "asc",
},
],
});
fetchSize
fetchSize
is the amount of records to fetch in checkboxes.
const { selectProps } = useRadioGroup({
resource: "languages",
fetchSize: 20,
});
queryOptions
Passing the queryOptions
property allows us to set the useQuery options
const { radioGroupProps } = useRadioGroup({
resource: "languages",
queryOptions: {
onError: () => {
console.log("triggers when on query return Error");
},
},
});
pagination
pagination
allows us to set page and items per page values.
For example, lets say that we have 1000 post records:
const { selectProps } = useSelect({
resource: "categories",
pagination: { current: 3, pageSize: 8 },
});
The listing will start from page 3, showing 8 records per page.
sort
sort
Use sorters
instead.
API Reference
Properties
Type Parameters
Property | Desription | Type | Default |
---|---|---|---|
TQueryFnData | Result data returned by the query function. Extends BaseRecord | BaseRecord | BaseRecord |
TError | Custom error object that extends HttpError | HttpError | HttpError |
TData | Result data returned by the select function. Extends BaseRecord . If not specified, the value of TQueryFnData will be used as the default value. | BaseRecord | TQueryFnData |
Return values
Property | Description | Type |
---|---|---|
radioGroupProps | Ant design radio group props | Radio Group |
queryResult | Results of the query of a record | QueryObserverResult<{ data: TData }> |
Example
npm create refine-app@latest -- --example field-antd-use-radio-group