How to create custom field using AntD

@kapa.ai i have an example using mui <Controller control={control} name="value" rules={{ required: "This field is required" }} defaultValue={""} render={({ field }) => { return ( <MDEditor data-color-mode={mode} value={field.value} onChange={field.onChange} height={500} minHeight={500} textareaProps={{ placeholder: "Please enter markdown text", style: { fontSize: 16, lineHeight: 1.5, minHeight: 900, }, }} previewOptions={MarkdownUtils.previewOptions} commands={MarkdownUtils.defaultCommands} onPaste={async (event: any) => { await MarkdownUtils.onImagePasted( event.clipboardData, (v) => { field.onChange({ target: { value: v } }); } ); }} onDrop={async (event: any) => { await MarkdownUtils.onImagePasted(event.dataTransfer, (v) => { field.onChange({ target: { value: v } }); }); }} /> ); }} /> i want the equivalent in antd
5 Replies
kapa.ai
kapa.ai3w ago
Hi @biohazard#1521. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a custom field using Ant Design in refine, specifically for a markdown editor similar to your MUI example, you can use the MDEditor component from the @uiw/react-md-editor package. Here's how you can implement it with Ant Design and refine:
import React from "react";
import { Edit, useForm } from "@refinedev/antd";
import { Form } from "antd";
import MDEditor from "@uiw/react-md-editor";

import { IPost } from "interfaces";

export const PostEdit: React.FC = (props) => {
const { formProps, saveButtonProps } = useForm<IPost>();

return (
<Edit {...props} saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="Content"
name="content"
rules={[
{
required: true,
},
]}
>
<MDEditor data-color-mode="light" />
</Form.Item>
</Form>
</Edit>
);
};
import React from "react";
import { Edit, useForm } from "@refinedev/antd";
import { Form } from "antd";
import MDEditor from "@uiw/react-md-editor";

import { IPost } from "interfaces";

export const PostEdit: React.FC = (props) => {
const { formProps, saveButtonProps } = useForm<IPost>();

return (
<Edit {...props} saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="Content"
name="content"
rules={[
{
required: true,
},
]}
>
<MDEditor data-color-mode="light" />
</Form.Item>
</Form>
</Edit>
);
};
This example is based on the custom input field documentation for refine with Ant Design Custom Inputs Example (https://refine.dev/docs/ui-integrations/ant-design/components/inputs/custom-inputs/#example). Key points to note: 1. We're using the useForm hook from @refinedev/antd, which provides integration with Ant Design's form components. 2. The MDEditor component is wrapped inside an Ant Design Form.Item. 3. The Form.Item handles the form state and validation rules, similar to your MUI Controller. 4. The MDEditor is used directly without needing to manually handle value and onChange props, as the Ant Design form in refine is designed to work seamlessly with custom input components Custom Inputs (https://refine.dev/docs/ui-integrations/ant-design/components/inputs/custom-inputs/). If you need more customization, you can add props to the MDEditor component as needed:
<Form.Item
label="Content"
name="content"
rules={[
{
required: true,
},
]}
>
<MDEditor
data-color-mode="light"
height={500}
preview="edit"
// Add more props as needed
/>
</Form.Item>
<Form.Item
label="Content"
name="content"
rules={[
{
required: true,
},
]}
>
<MDEditor
data-color-mode="light"
height={500}
preview="edit"
// Add more props as needed
/>
</Form.Item>
For more information on using the MDEditor component and its available props, you can refer to the React Markdown documentation (https://uiwjs.github.io/react-md-editor/) as mentioned in the React Markdown blog post (https://refine.dev/blog/react-markdown/#using-the-mdeditor-component). This approach should give you an equivalent setup to your MUI example, leveraging refine's integration with Ant Design forms. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3w ago
<@680514070167683118> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
genetic-orange
genetic-orangeOP3w ago
@kapa.ai is there a way to statically get api url? import { pickNotDeprecated } from "@definitions/index"; import { useDataProvider, useResource } from "@hooks"; export const useApiUrl = (dataProviderName?: string): string => { const dataProvider = useDataProvider(); const { resource } = useResource(); const { getApiUrl } = dataProvider( dataProviderName ?? pickNotDeprecated(resource?.meta, resource?.options)?.dataProviderName, ); return getApiUrl(); }; i have this hook, but i want to get the api url in a static class
kapa.ai
kapa.ai3w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Refine provides a getApiUrl method in the dataProvider object that returns the apiUrl value. This method is consumed by the useApiUrl data hook. However, since hooks can't be used inside a class component or outside a component, you can't use the useApiUrl hook in a static class. Here's an example of how getApiUrl is defined in a dataProvider:
import { DataProvider } from "@refinedev/core";

export const dataProvider = (apiUrl: string): DataProvider => ({
getApiUrl: () => apiUrl,
// ...
});
import { DataProvider } from "@refinedev/core";

export const dataProvider = (apiUrl: string): DataProvider => ({
getApiUrl: () => apiUrl,
// ...
});
Source (https://refine.dev/docs/data/data-provider/#getapiurl-) If you want to access the API URL in a static class, you would need to store the API URL in a separate constant or configuration that can be imported directly into your static class. Here's an example:
// config.js
export const API_URL = "<https://api.fake-rest.refine.dev";>

// YourStaticClass.js
import { API_URL } from './config.js';

class YourStaticClass {
static someMethod() {
console.log(API_URL);
}
}
// config.js
export const API_URL = "<https://api.fake-rest.refine.dev";>

// YourStaticClass.js
import { API_URL } from './config.js';

class YourStaticClass {
static someMethod() {
console.log(API_URL);
}
}
This way, you can access the API URL in a static context. However, this approach assumes that your API URL is static and does not change during the runtime of your application. If your API URL can change or is determined dynamically, you would need a different approach to pass this information to your static class. Please note that this approach is not directly related to refine or its getApiUrl method, but is a general solution for accessing configuration data in a static context in JavaScript and TypeScript. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3w ago
<@680514070167683118> Kapa.ai is still learning and improving, please let me know how I did by reacting below.