Antd Components with React Hook Form
Can i use react hook form with antd instead of antd form??
6 Replies
Hi @dreamer9067. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Refine provides support for various form libraries, including both Ant Design Form and React Hook Form. However, the integration of React Hook Form is intended for headless users, as mentioned in the documentation (https://refine.dev/docs/api-reference/core/hooks/useForm).
If you want to use Ant Design components with React Hook Form, you might need to create some wrappers or adapters yourself, as the built-in integration in Refine is designed for Ant Design Form.
Remember that Refine provides a lot of out-of-the-box functionality with Ant Design Form, including various hooks like
useForm, useModalForm, useStepsForm, useDrawerForm, and useEditableTable. These hooks provide a lot of functionality for managing form state, handling form submissions, and integrating with other Ant Design components.
If you choose to use React Hook Form, you might need to implement some of this functionality yourself. However, Refine does provide an adapter for React Hook Form, which you can learn more about in the documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below
funny-blue•13mo ago
@kapa.ai how can i listen to radio field item changes in form like below:
<Form.Item
label={t("campaigns.fields.budgetType")}
name={["budgetType"]}
rules={[
{
required: true,
},
]}
>
<Radio.Group {...budgetTypeProps} />
</Form.Item>
Let me check the knowledge base for you. One moment! :books:
----------------------
You can listen to changes in the Radio.Group component by using the
onChange event. This event is triggered whenever a radio button in the group is selected. Here's an example of how you can use it:
In this example, the onChange event handler logs the value of the selected radio button whenever it changes. You can replace the console.log statement with your own code to perform whatever action you need.
Please note that the onChange event handler receives an event object e, and the value of the selected radio button can be accessed via e.target.value.
For more information, you can refer to the Ant Design Radio.Group documentation (https://ant.design/components/radio/#components-radio-demo-radiogroup-with-name).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below
funny-blue•13mo ago
hey @kapa.ai onfinish dosent seem to be executed??
const {
form,
current,
gotoStep,
stepsProps,
formProps,
saveButtonProps,
queryResult,
} = useStepsForm<any>({
autoSave:{
enabled:false,
onFinish:(values)=>{
campaignRef.current.getFinalFormData();
return {};
}
}
});
return (
<Edit
isLoading={queryResult?.isFetching}
footerButtons={
<>
{current > 0 && (
<Button
onClick={() => {
gotoStep(current - 1);
}}
>
{t("buttons.previousStep")}
</Button>
)}
{current < formList.length - 1 && (
<Button
onClick={() => {
handleGoToNextStep();
}}
>
{t("buttons.nextStep")}
</Button>
)}
{current === formList.length - 1 && (
<SaveButton style={{ marginRight: 10 }} {...saveButtonProps} />
)}
</>
}
>
{/* <Row gutter={[64, 0]} wrap> */}
<Steps {...stepsProps} responsive>
<Steps.Step title={t("campaigns.steps.details")} />
<Steps.Step title={t("campaigns.steps.targeting")} />
<Steps.Step title={t("campaigns.steps.ads")} />
</Steps>
<CampaignForm ref={campaignRef} formProps={formProps} campaignQueryResult={queryResult} initialValues={{
isActive: true,
...formProps.initialValues,
}} current={current} gotoStep={gotoStep} form={form} />
</Edit>
);