component props & apis

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Call function when Modal closes and animation completes

Modal and Drawer components use the Transition component under the hood. Use the transitionProps property to pass props to the Transition component. Pass an onExited callback to transitionProps to execute a function after the Modal closes and the closing animation completes.

Call function when Modal/Drawer animation starts or completes

The transitionProps property on Modal and Drawer components accepts onEntered and onExited callbacks. onEntered fires when the opening animation completes. onExited fires when the closing animation completes.

Modal transitionProps example

Example showing how to use transitionProps on Modal: import { Modal } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; function Demo() { const [opened, handlers] = useDisclosure(); return ( <Modal title="Modal title" opened={opened} onClose={handlers.close} transitionProps={{ onEntered: () => console.log('Modal opened, animation done'), onExited: () => console.log('Modal closed, animation done'), }} > Modal content </Modal> ); }

Prevent Modal from closing with opened prop

Modal and Drawer components' opened state is controlled by the opened prop. You can prevent the modal from closing by setting the opened prop to true. This is useful when you have an async operation inside the modal and want to prevent the user from closing it before the operation is finished.

Autocomplete and TagsInput do not support value/label data structure

Unlike Select and MultiSelect components, Autocomplete and TagsInput do not support data in the { value: string; label: string; } format. This is intentional to avoid confusion and make it clear that users can enter any string value, not just predefined options. The ambiguity arises because when users enter text not in the predefined list, it is unclear whether the value or label should be used.

Autocomplete and TagsInput allow free user input

Autocomplete and TagsInput components allow users to enter any string value. The selection is not limited to a predefined list of options. Users can select from provided suggestions or enter custom text that is not in the data list.

Autocomplete basic usage with data prop

Autocomplete accepts a simple array of strings via the data prop. Example: <Autocomplete data={['React', 'Vue']} /> allows users to select from these options or type any other value like 'Angular'.

Use Select component for limited predefined options

If you need to limit user input to a predefined list of options, use a searchable Select component instead of Autocomplete. Select supports the { value: string; label: string; } data structure and restricts input to the provided options.

Give your agent this brain