[EuiI18n] Add documents on how to use i18n.render

elastic · Oct 5, 2021 · cc34cc8 · cc34cc8
1 parent 21efaa8
commit cc34cc8
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/src-docs/src/views/i18n/context.js b/src-docs/src/views/i18n/context.js
@@ -11,6 +11,7 @@ import {
   EuiI18n,
   EuiI18nNumber,
   useEuiI18n,
+  EuiSwitch,
 } from '../../../../src/components';
 
 const mappings = {
@@ -60,10 +61,14 @@ const ContextConsumer = () => {
 
 export default () => {
   const [language, setLanguage] = useState('en');
+  const [useDiv, setUseDiv] = useState(false);
 
   const i18n = {
     mapping: mappings[language],
     formatNumber: (value) => new Intl.NumberFormat(language).format(value),
+    render: useDiv
+      ? () => (children) => <div style={{ display: 'inline' }}>{children}</div>
+      : undefined,
   };
 
   return (
@@ -84,6 +89,14 @@ export default () => {
 
       <EuiSpacer size="m" />
 
+      <EuiSwitch
+        label="Use <div> other than <Fragment> to render component"
+        checked={useDiv}
+        onChange={({ target }) => setUseDiv(target.checked)}
+      />
+
+      <EuiSpacer size="m" />
+
       <EuiContext i18n={i18n}>
         <ContextConsumer />
       </EuiContext>