xenial-black
xenial-black2y ago

Best practice of adding a link to a resource

How can I add a link to a resource within a TextField? What is the best practice here?
5 Replies
kapa.ai
kapa.ai2y ago
Hi @_nirock. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai2y ago
---------------------- To add a link to a resource within a TextField, you can use the Url field component provided by refine. The implementation depends on the UI library you are using. Here are the examples for Ant Design and Material UI: Ant Design: The Url field component uses Ant Design's <Typography.Link> (https://ant.design/components/typography/) component. You can pass a URL in its value prop and show a text in its place by passing any children.
import { Url } from "@refinedev/antd";

<Url value="https://example.com">Example Link</Url>
import { Url } from "@refinedev/antd";

<Url value="https://example.com">Example Link</Url>
Source: https://refine.dev/docs/api-reference/antd/components/fields/url (https://refine.dev/docs/api-reference/antd/components/fields/url) Material UI: The Url field component uses Material UI <Typography> (https://mui.com/material-ui/react-typography/#main-content) and Link (https://mui.com/material-ui/react-link/#main-content) components. You can pass a URL in its value prop and show a text in its place by passing any children.
import { Url } from "@refinedev/mui";

<Url value="https://example.com">Example Link</Url>
import { Url } from "@refinedev/mui";

<Url value="https://example.com">Example Link</Url>
Source: https://refine.dev/docs/api-reference/mui/components/fields/url (https://refine.dev/docs/api-reference/mui/components/fields/url) These are the best practices for adding a link to a resource within a TextField using refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Url | refine
This field lets you embed a link. It uses Ant Design's component. You can pass a URL in its value prop and you can show a text in its place by passing any children.
React Typography component - Material UI
Use typography to present your design and content as clearly and efficiently as possible.
Links - Material UI
The Link component allows you to easily customize anchor elements with your theme colors and typography styles.
kapa.ai
kapa.ai2y ago
<@335790220425297921> kapa.ai is still learning and improving, please let us how it did by reacting below
xenial-black
xenial-blackOP2y ago
This doesn't seems like a good way to redirecting to another resource
rare-sapphire
rare-sapphire2y ago
Hey @_nirock, You can use the useNavigation hook. https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/
useNavigation | refine
useNavigation is a hook that provides methods to navigate the app. Internally, it uses the go method of the routerProvider.

Did you find this page helpful?