useModalForm change title

how can i change modal title using useModalForm from antd?

2 Replies

Hi @danyalutsevich. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the modal title using the useModalForm hook from Ant Design in refine, you can pass the title prop to the Modal component. Here is an example of how you can do this:

import React from "react";
import { Modal, useModalForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const MyComponent: React.FC = () => {
  const { modalProps, formProps, show } = useModalForm();

  return (
    <>
      <Button type="primary" onClick={() => show()}>
        Show Modal
      </Button>
      <Modal
        {...modalProps}
        title="My Custom Modal Title" // Set your custom title here
        footer={[
          <Button key="submit" type="primary" onClick={formProps.submit}>
            Submit
          </Button>,
        ]}
      >
        <Form {...formProps} layout="vertical">
          <Form.Item label="Title" name="title">
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default MyComponent;

import React from "react";
import { Modal, useModalForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const MyComponent: React.FC = () => {
  const { modalProps, formProps, show } = useModalForm();

  return (
    <>
      <Button type="primary" onClick={() => show()}>
        Show Modal
      </Button>
      <Modal
        {...modalProps}
        title="My Custom Modal Title" // Set your custom title here
        footer={[
          <Button key="submit" type="primary" onClick={formProps.submit}>
            Submit
          </Button>,
        ]}
      >
        <Form {...formProps} layout="vertical">
          <Form.Item label="Title" name="title">
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default MyComponent;

In this example, the title prop of the Modal component is set to "My Custom Modal Title". You can change this string to whatever title you want for your modal. For more information, you can refer to the useModalForm documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#show). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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