@jetshop/intl 5.11.1 → 5.11.2

package/index.mdx

@@ -13,30 +13,54 @@ Localization and translations are essential for building a good cross-border e-c
 Much of the content in Flight stores come from the API, which already handles translations. However, there's many cases where you want to keep the texts inside the shop repository, or where you want to do some kind of formatting before rendering the text.
 For this we have a wrapper around the library [format-message](https://github.com/format-message/format-message). The wrapper around format-message is needed to use the correct translations when doing server-side rendering.
 
-Whenever you want to use a translation string in a React component it's as easy as importing our helper utility and wrapping the text string:
+When you want to render a translation string you should preferrably use the `useIntl` hook to wrap your translation strings:
+
+```javascript
+import { useIntl } from '@jetshop/intl';
+
+const App = () => {
+  const t = useIntl();
+
+  return <button>{t('This is my translatable button text')}</button>;
+};
+```
+
+This will result in a pure text string rendered where you call the function. There are lots of places in Flight where we use an older way of rendering translation strings, importing `t` directly from `@jetshop/intl`.
+This works, but is not recommended, since it has some special behaviour that might cause issues in some places.
 
 ```javascript
 import t from '@jetshop/intl';
 
-const App = () => <button>{t('This is my translatable button text')}</button>;
+const App = () => {
+  return <button>{t('This is my translatable button text')}</button>;
+}
+
+// what is actually being rendered
+const App = () => {
+  return <button><IntlContext.Consumer>{t => t('This is my translatable button text')}</IntlContext></button>
+}
 ```
 
+In most cases this works well, but if you try to use a translation string inside e.g. a input placeholder, you will end up with broken markup.
+
 You can also work with inline placeholders:
 
 ```javascript
-import t from '@jetshop/intl';
+import { useIntl } from '@jetshop/intl';
 
-const App = () => (
-  <span>{t('Hi {name}! How are you doing?', { name: 'User' })}</span>
-);
+const App = () => {
+  const t = useIntl();
+  return <span>{t('Hi {name}! How are you doing?', { name: 'User' })}</span>;
+};
 ```
 
 The [ICU Message Format](http://userguide.icu-project.org/formatparse/messages) that format-message uses, also support pluralization:
 
 ```javascript
-import t from '@jetshop/intl';
+import { useIntl } from '@jetshop/intl';
 
 const App = () => {
+  const t = useIntl();
   const [count, setCount] = useState(0);
   return (
     <button onClick={() => setCount(count + 1)}>
@@ -69,6 +93,8 @@ const App = () => (
 );
 ```
 
+Note that this does not work with the `useIntl` import.
+
 ## Localization
 
 format-message can also help with formatting text according to local standards, such as date, time, numbers etc. It's basically a wrapper around the built in Intl functions in the browser and can be used either together with translation strings as a part of the ICU message format, or by using the exposed helper functions on its own.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetshop/intl",
-  "version": "5.11.1",
+  "version": "5.11.2",
   "main": "index.js",
   "license": "MIT",
   "bin": {