Passing Component Props
How can I pass props to my modal created with useModal from my Mantine <Button> component?
useModal from your Mantine <Button> component by using the show function returned by useModal in the onClick handler of your <Button> component. Here's an example based on the information provided in the extracts:show function is used to control the visibility of the modal. When the button is clicked, the show function is called, which triggers the opening of the modal. The modalProps are then passed to the <Modal> component to control its behavior and appearance.Note: you can ask me a follow up question by @ mentioning me again useModal hook from Refine's core hooks does not directly provide a way to pass modal props. This hook is designed to be headless and UI-independent, and it only returns the show and close functions, and the visible state. Here's an example of how it's used:visible state is used to show or hide the modal. The show and close functions allow changing the visible state. It does not provide any functionality besides this. You can use this hook anywhere.Note: you can ask me a follow up question by @ mentioning me again useForm?useForm by providing an object to the useForm hook. This object can contain initial values for the form fields, validation rules, and other properties. Here's an example based on the information provided in the extracts:initialValues is an object that contains the initial values for the form fields. validate is an object that contains validation rules for the form fields. The useForm hook returns an object that contains various properties and methods that you can use to manage your form.Note: you can ask me a follow up question by @ mentioning me again useModaluseModaluseModal<Button><Button>showshowshowshowshowmodalProps<Modal>initialValuesvalidateimport { useModal } from "@refinedev/antd";
import { Modal, Button } from "antd";
export const PostList: React.FC = () => {
const { show, modalProps } = useModal();
return (
<>
<Button onClick={show}>Show Modal</Button>
<Modal {...modalProps}>
<p>Modal Content</p>
</Modal>
</>
);
}; import { useModal } from "@refinedev/core";
export const PostList: React.FC = () => {
const { visible, show, close } = useModal();
return (
<>
<button onClick={show}>Show Modal</button>
{visible && (
<YourModalComponent>
<p>Dummy Modal Content</p>
<button onClick={close}>Close Modal</button>
</YourModalComponent>
)}
</>
);
}; import { useForm } from "@refinedev/mantine";
const { saveButtonProps, getInputProps } = useForm({
initialValues: {
title: "",
status: "",
},
validate: {
title: (value) =>
value.length < 2
? "Post title should be atleast 2 characters long"
: null,
status: (value) => (value.length <= 0 ? "Status is required" : null),
},
});