How to use @formatjs/intl-utils - 10 common examples

// TODO: Could be done with Array.prototype.reducer very nicely
    parts.forEach((token) => {
      if (token === '{{') {
        paramActive = true;
      } else if (token === '}}') {
        paramActive = false;
      } else if (paramActive) {
        const param = this.getParam(token);
        message.push((<span>{param}</span>));
      } else {
        message.push(token);
      }
    });

    const createdDate = this.convertUTCDateToLocalDate(new Date(createdAt));
    const { value, unit } = selectUnit(createdDate, Date.now());
    return (
      <li>
        <div>
          
        </div>
        {message}
      </li>
    );
  }
}

export const TimeAgo = (props: Props) => {
  const { className, before, date } = props;

  let dateNumber: number = typeof date === "number" ? date : +new Date(date);
  let dateString: string =
    typeof date === "number" ? new Date(date).toISOString() : date;
  const { value, unit } = selectUnit(dateNumber);

  // TODO: since we're passing a relative value, do we need to update it
  // ourselves now? If so, do we want to? Using hooks maybe?
  // TODO: review react-hint usage
  return (
    <span title="{dateString}">
      {before ? &lt;&gt;{before}  : null}
      
    </span>
  );
};

| 'defaultLocale'
    | 'defaultFormats'
    | 'onError'
    | 'timeZone'
  >,
  state: Formatters,
  messageDescriptor: MessageDescriptor = {id: ''},
  values: Record<
    string,
    PrimitiveType | React.ReactElement | FormatXMLElementFn
  > = {}
): string | React.ReactNodeArray {
  const {id, defaultMessage} = messageDescriptor;

  // `id` is a required field of a Message Descriptor.
  invariant(!!id, '[React Intl] An `id` must be provided to format a message.');
  const message = messages && messages[id];
  formats = deepMergeFormatsAndSetTimeZone(formats, timeZone);
  defaultFormats = deepMergeFormatsAndSetTimeZone(defaultFormats, timeZone);

  let formattedMessageParts: Array = [];

  if (message) {
    try {
      const formatter = state.getMessageFormat(message, locale, formats, {
        formatters: state,
      });

      formattedMessageParts = formatter.formatHTMLMessage(values);
    } catch (e) {
      onError(
        createError(

export default () => {
  const { value, unit } = selectUnit(Date.now())
  return (
    
      <p>
        
      </p>
    
  )
}

export const FormattedRelative = (props: FormattedRelativeProps) => {
  const { value, unit } = selectUnit(props.value);
  return ;
};