Passing Component Props

thoughtless-moccasin · 2023-07-24T20:42:54.692Z

How can I pass props to my modal created with useModal from my Mantine component?

K

kapa.ai•7/24/23, 8:42 PM

Hi @theswarm420. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•7/24/23, 8:43 PM

----------------------
You can pass props to your modal created with

useModal

useModal

useModal

useModal from your Mantine

<Button>

<Button>

<Button>

<Button> component by using the

show

show

show

show function returned by

useModal

useModal

useModal

useModal in the

onClick

onClick

handler of your

<Button>

<Button>

<Button>

<Button> component. Here's an example based on the information provided in the extracts:

import { 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/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/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/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>  
 </>  
 );  
};

In this example, the

show

show

show

show function is used to control the visibility of the modal. When the button is clicked, the

show

show

show

show function is called, which triggers the opening of the modal. The

modalProps

modalProps

modalProps

modalProps are then passed to the

<Modal>

<Modal>

<Modal>

<Modal> component to control its behavior and appearance.

For more information, you can refer to the useModal documentation (https://refine.dev/docs/api-reference/antd/hooks/ui/useModal).
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•7/24/23, 8:43 PM

@1117289843584671775 kapa.ai is still learning and improving, please let us how it did by reacting below

T

thoughtless-moccasinOP•7/24/23, 8:46 PM

@kapa.ai I'm implementing useModal from Refine's core hooks, not antd. Is there a way to pass modal props with this hook?

K

kapa.ai•7/24/23, 8:46 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•7/24/23, 8:46 PM

----------------------
The

useModal

useModal

useModal

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

show

show

show and

close

close

functions, and the

visible

visible

state. Here's an example of how it's used:

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 { 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 { 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 { 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>  
 )}  
 </>  
 );  
};

In this example, the

visible

visible

state is used to show or hide the modal. The

show

show

show

show and

close

close

functions allow changing the

visible

visible

state. It does not provide any functionality besides this. You can use this hook anywhere.

For more information, you can refer to the useModal documentation (https://refine.dev/docs/api-reference/core/hooks/ui/useModal).
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•7/24/23, 8:46 PM

@1117289843584671775 kapa.ai is still learning and improving, please let us how it did by reacting below

T

thoughtless-moccasinOP•7/24/23, 8:48 PM

@kapa.ai How can I instead pass props into Mantine's

useForm

useForm

?

K

kapa.ai•7/24/23, 8:48 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•7/24/23, 8:49 PM

----------------------
You can pass props into Mantine's

useForm

useForm

by providing an object to the

useForm

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:

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),  
 },  
});

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),  
 },  
});

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),  
 },  
});

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),  
 },  
});

In this example,

initialValues

initialValues

initialValues

initialValues is an object that contains the initial values for the form fields.

validate

validate

validate

validate is an object that contains validation rules for the form fields. The

useForm

useForm

hook returns an object that contains various properties and methods that you can use to manage your form.

For more information, you can refer to the useForm documentation (https://refine.dev/docs/api-reference/mantine/hooks/form/useForm).
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•7/24/23, 8:49 PM

@1117289843584671775 kapa.ai is still learning and improving, please let us how it did by reacting below

B

brilliant-lime•7/27/23, 7:23 AM

It's seems basic react question

Sorry If i could not understand question exactly.
you can check this example https://react.dev/learn/sharing-state-between-components#lifting-state-up-by-example

If this not answer yok question please provide reproducible example on codesandbox, i can try to help