In react-admin, how can I prefix a UrlField href?

Question

Let's say I have the following:

<UrlField source='fbUsername' />

If the result is fb username foo, this links relatively to /foo.

(?) How can I prefix this url to:

https://facebook.com/

So the result would be:

https://facebook.com/${fbUsername}

https://facebook.com/foo

score 2 · Answer 1 · answered Apr 13 '21 at 06:38

<UrlField> only accepts a URL value. For your use case, you should write a custom field based on the UrlField source. Something like:


import * as React from 'react';
import { Link } from '@material-ui/core';
import { useRecordContext } from 'react-admin';

const MyUrlField = ({ source }) => {
    const record = useRecordContext();
    const value = record && record[source];

    if (value == null) {
        return null;
    }

    return (
        <Link href={`https://facebook.com/${value}`}>
            {value}
        </Link>
    );
});

MyUrlField.defaultProps = {
    addLabel: true,
};

Thanks bud! However, minus that `)` syntax err at the end of the comment, I have 1:1 your code similar to a vanilla `UrlField` and nothing seems to be showing up: The `UrlField` works, but alas - the `MyUrlField` does not work (nothing shows). Any ideas? Seems to always be returning null @ `if (value == null)` - but again, UrlField has the same source and works (to rule out !source) — dylanh724, Apr 14 '21 at 14:15

dylanh724 · Accepted Answer · 2021-04-14T14:42:55.317

Based on @françois-zaninotto 's answer, I fixed a syntax error fixed some of the missing useRecordContext() param that made it work:

// ###############################################
// FbUrlField.js
import * as React from 'react';
import { Link } from '@material-ui/core';
import { useRecordContext } from 'react-admin';

const FbUrlField = ( props ) =>
{
    const { source, target, rel } = props;
    const record = useRecordContext(props);
    const value = record && record[source];

    if (value == null) {
        return null;
    }

    return (
        <Link href={`https://facebook.com/${value}`} target={target} rel={rel}>
            {value}
        </Link>
    );
};

FbUrlField.defaultProps = {
    addLabel: true,
};

export default FbUrlField;


// ###############################################
// SomeList.js
import FbUrlField from './FbUrlField';
[...]
<FbUrlField
    label='FB'
    source='fbUsername'
    target='_blank' // New window
    rel="noopener noreferrer" // For security
/>

However, there's still 1 issue - if you have row click edit, even though FB opens in a new tab, you still click in their profile. I tried the following that doesn't seem to work: `onClick={ (e) => { e.stopPropagation(); } }`. I need to look into how to implement onClick for this custom UrlField. — dylanh724, Apr 14 '21 at 14:49

score 0 · Answer 3 · answered Oct 04 '22 at 07:16

I'm new to react-admin. I was following the tutorial and came across the idea of doing something like this because the user's website is just bla.com and it doesn't actually work because you get http://localhost:xxxx/bla.com as a link. I came up with this method to do it, in typescript. Take it with a grain of salt:

/// user-url.field.tsx
import { UrlField, useRecordContext } from 'react-admin';

export const UserURLField = ({source}: {source: string}) => {
  const record = useRecordContext();
  const fakeRecord = {
    [source]: `http://${record[source]}`,
  };
  return (
  <UrlField source={source} record={fakeRecord}></UrlField>
  );
};

In react-admin, how can I prefix a UrlField href?

3 Answers3

Linked