JavaScript
React
react-intl

react-intlが0を表示しない

react-intlのvaluesに 0 を渡すと 0 が描画されない

例えば以下のような時

<FormattedMessage
  id={'メッセージのID'}
  values={{ min: 0, max: 255 }}
/>

// 0 ~ 255 と表示されることを期待
// 実際には ~ 255 と表示される

react-int内部で使用しているintl-messageformatのバグでした。
このバグはintl-messageformat v2.0.0で解消されてます。

メッセージにvalues={{ min: 0, max: 255 }}を埋め込む以下の処理でバグが発生していたようです。

/* /src/compiler.js */
StringFormat.prototype.format = function (value) {
  // 修正前
  if (!value) { // 0はfalseになる
    return '';
  }
  // 修正後
  if (!value && typeof value !== 'number') { // 0はnumberなので通らない
    return '';
  }

  return typeof value === 'string' ? value : String(value);
}

コミットコメントにzero values should not return an empty stringの文言がなかったら絶対見つけれなかった・・・

一応解決方法は以下に載ってました。
試しておりませんが載せておきます。
https://github.com/yahoo/react-intl/issues/561

または、0を文字列にして指定してやると表示されます。