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
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:
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:
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:
----------------------<@680514070167683118> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
genetic-orangeOP•3w 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
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
:
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:
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:
----------------------<@680514070167683118> Kapa.ai is still learning and improving, please let me know how I did by reacting below.