Passing Component Props

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

9 Replies

kapa.ai•14mo ago

Hi @theswarm420. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can pass props to your modal created with 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:

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 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. 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 :speech_balloon: ----------------------

kapa.ai•14mo ago

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

unwilling-turquoise•14mo ago

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

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The 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:

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 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. 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 :speech_balloon: ----------------------

kapa.ai•14mo ago

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

unwilling-turquoise•14mo ago

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

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can pass props into Mantine's 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:

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 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. 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 :speech_balloon: ----------------------

kapa.ai•14mo ago

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

correct-apricot•14mo ago

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