useSelect

useSelect hook allows you to manage an Mantine Select component when records in a resource needs to be used as select options.

Usage

We'll demonstrate how to get data at /categories endpoint from https://api.fake-rest.refine.dev REST API and use it as select options. Also, you'll see how to use Select component with useSelect hook and useForm hook.

http://localhost:3000/posts/create

import { Create, Select, useForm, useSelect } from "@pankod/refine-mantine";

const PostCreate: React.FC = () => {
    const { getInputProps, onSubmit } = useForm({
        initialValues: {
            category: {
                id: "",
            },
        },
    });

    const { selectProps } = useSelect<ICategory>({
        resource: "categories",
    });

    return (
        <Create
            saveButtonProps={{
                onClick: onSubmit((values) => console.log(values)),
            }}
        >
            <Select
                label="Category"
                placeholder="Pick one"
                withinPortal
                {...getInputProps("category.id")}
                {...selectProps}
            />
        </Create>
    );
};

All we have to do is pass the selectProps it returns to the <Select> component.

attention

By default, refine does the search using the useList hook and passes it to the search parameter. If you get a problem you should check your getList function in your Data Provider. If you want to change this behavior to make client-side filtering, you can examine this example.

useSelect uses the useList hook for fetching data. Refer to useList hook for details. →

Options

resource

const { selectProps } = useSelect({
    resource: "categories",
});

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

Refer to Mantine Select component documentation for detailed info for options. →

defaultValue

const { selectProps } = useSelect({
    resource: "categories",
    defaultValue: 1,
});

Adds extra options to <Select> component. It uses useMany so defaultValue can be an array of strings like follows.

defaultValue: [1, 2],

Refer to the useMany documentation for detailed usage. →

tip

Can use defaultValue property when edit a record in <Edit> component.

optionLabel and optionValue

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

Allows you to change the values and appearance 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 { selectProps } = useSelect({
    resource: "categories",
    filters: [
        {
            field: "isActive",
            operator: "eq",
            value: true,
        },
    ],
});

It allows us to add some filters while fetching the data. For example, if you want to list only the active records.

sort

const { selectProps } = useSelect({
    resource: "categories",
    sort: [
        {
            field: "title",
            order: "asc",
        },
    ],
});

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

fetchSize

const { selectProps } = useSelect({
    resource: "categories",
    fetchSize: 20,
});

Amount of records to fetch in select box.

pagination

Allows us to set page and items per page values.

For example imagine that we have 1000 post records:

const { selectProps } = useSelect({
    resource: "categories",
    pagination: { current: 3, pageSize: 8 },
});

Listing will start from page 3 showing 8 records.

onSearch

const { selectProps } = useSelect({
    resource: "categories",
    onSearch: (value) => [
        {
            field: "title",
            operator: "containss",
            value,
        },
    ],
});

If defined, it allows us to override the filters to use when fetching list of records. Thus, it . It should return CrudFilters.

Client-side filtering

const { selectProps } = useSelect({
    resource: "categories",
});

<Select
    {...selectProps}
    onSearch={undefined}
    filterOption={true}
    optionFilterProp="label" // or "value"
/>;

queryOptions

const { selectProps } = useSelect({
    resource: "categories",
    queryOptions: {
        onError: () => {
            console.log("triggers when on query return Error");
        },
    },
});

useQuery options can be set by passing queryOptions property.

defaultValueQueryOptions

When the defaultValue property is given, the useMany data hook is called for the selected records. With this property, you can change the options of this query. If not given, the values given in queryOptions will be used.

const { selectProps } = useSelect({
    resource: "categories",
    defaultValueQueryOptions: {
        onSuccess: (data) => {
            console.log("triggers when on query return on success");
        },
    },
});

useQuery options for default value query can be set by passing queryOptions property.

API Reference

Properties

Return values

Property	Description	Type
selectProps	Mantine Select props	SelectPropsType
queryResult	Result of the query of a record	QueryObserverResult<{ data: TData }>
defaultValueQueryResult	Result of the query of a defaultValue record	QueryObserverResult<{ data: TData }>

SelectPropsType

Property	Description	Type
data	Select data used to renderer items in dropdown	(string \| SelectItem)[]
searchable	Set to true to enable search	boolean
onSearchChange	Called each time search value changes	(query: string) => void
filterDataOnExactSearchMatch	Should data be filtered when search value exactly matches selected item	boolean

Live StackBlitz Example