How do I format an indefinite article with react-intl's formatMessage?

35 Views Asked by At

Is there a way in react-intl's formatMessage to specify an indefinite article and have it automatically deduce whether to use "a" or "an" based on the following word?

I don't see one. This code is problematic because while formatted message "A Manager" is correct for other values that start with a vowel like Admin the formatted message "A Admin" is incorrect (it should be "An Admin").

import { useIntl } from 'react-intl';

// ... component setup code ...
  const { formatMessage } = useIntl();

  const userType = ...; // 'ADMIN' or 'MANAGER'
  const result = formatMessage({ id: 'A {userType} must xyz to fulfill this request.' }, { userType });

I could define a mapping for each value of the variable that includes the correct article but this is a pain to maintain. I could also write a simple function to dynamically produce the article but it seems like that would not be compatible with react-intl translations.

I have addressed this case by rewriting the formatted messages as "A user with role X" instead of "A/An X" but I'd prefer to not have to change the text. Does react-intl have a way of handling the indefinite article?

0

There are 0 best solutions below