How to Create a List of Rich Objects

[nbibler]

I couldn't find an example or discussion about this topic. Does next-intl provide a mechanism to basically combine the "rich text" behavior with list behaviors?

A simple example would be: A Post has multiple Authors. I'd like generate markup to link to each Author from that Post in a localized list (carriage return added for readability here):

<h1>Post Title</h1>
<p>
  <a href="/author/1">Author One</a>, 
  <a href="/author/2">Author Two</a>, and 
  <a href="/author/3">Author Three</a>
</p>

It seems like something like the following would work, but the list function only accepts an array of strings:

const f = useFormatter();
const output = f.list(
  [
    <Link href="/author/1">Author One</Link>,
    <Link href="/author/2">Author Two</Link>,
    <Link href="/author/3">Author Three</Link>,
  ],
  { type: "conjunction" }
);

react-intl exposes a FormattedList Component to accomplish this. It accepts a collection of strings or React Nodes and combines them using the conjunction Intl logic.

Did I miss something obvious?

[amannn]

Hey, thanks for the great question, this is indeed missing currently!

It's somewhat related to #774, but I'm wondering if this could be supported with the existing .list API. Maybe we'd have to make the return type dynamic to either return a string in case the values are all string but a ReactNode in case those are passed. The return type is quite important in case the formatted value is used in attributes like aria-label.

I tried a quick example:

const vehicles = ['Motorcycle', 'Car', <p>Bus</p>];

const formatterEn = new Intl.ListFormat('en', {
  style: 'long',
  type: 'conjunction'
});

const partValuesEn = formatterEn
  .formatToParts(vehicles)
  .map((p) => p.value);

This doesn't seem to work due to:

Iterable yielded #<Object> which is not a string

I think this would require some research on how react-intl accomplishes this and if next-intl could support this without a significant change in bundle size.

Would you be interested in looking into this?

[nbibler]

First, thanks for the rapid response and for your work maintaining and supporting the library! 😄

I'm not sure I have time at the moment to help with active development. I wouldn't feel comfortable promising that, anyway, with other constraints going on. I can certainly test/verify approaches or solutions, should that be useful.

At some point, I'll glance around again at react-intl's approach. If anything obvious jumps out, I'll update here. 👍

[amannn]

Sure, no worries!

I had a moment to have a look at the implementation from react-intl:

      if (typeof v === 'object') {
        const id = generateToken(i)
        richValues[id] = v as any
        return id
      }

…where generateToken simply creates an id based on the index of elements in case of rich text values.

The spec on the values that formatting functions from ListFormat accept only has this information in regard to the limitation of strings:

NOTE
This algorithm raises exceptions when it encounters values that are not Strings, because there is no obvious locale-aware coercion for arbitrary values.

Based on this, I think we can be a bit more flexible like react-intl does and accept React elements too. I've added #845 to address this.

Would you like to try out [email protected] to see if this works as expected in your app? Note that you have to supply a key for React elements that are passed to the formatting function (see also the proposed docs).

Let me know what you think! 🙌

[nbibler]

This works exactly as expected! 🎉

Thank you!

[amannn]

Great! 🙌

This is out in [email protected].