Example of react-intl added.

Author: viniciusavieira

docs/example-react-intl.md

@@ -0,0 +1,51 @@
+---
+id: example-react-intl
+title: React Intl
+---
+
+```jsx
+import React from 'react'
+import 'jest-dom/extend-expect'
+import { render, cleanup, getByTestId } from 'react-testing-library'
+import { IntlProvider, FormattedDate } from 'react-intl'
+import IntlPolyfill from 'intl'
+import 'intl/locale-data/jsonp/pt'
+
+const setupTests = () => {
+  // https://formatjs.io/guides/runtime-environments/#server
+  if (global.Intl) {
+    Intl.NumberFormat = IntlPolyfill.NumberFormat
+    Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat
+  } else {
+    global.Intl = require('intl')
+  }
+}
+
+const FormatDateView = () => {
+  return (
+    <div data-testid="date-display">
+      <FormattedDate
+        value="2019-03-11"
+        timeZone="utc"
+        day="2-digit"
+        month="2-digit"
+        year="numeric"
+      />
+    </div>
+  )
+}
+
+const renderWithReactIntl = component => {
+  return {
+    ...render(<IntlProvider locale="pt">{component}</IntlProvider>),
+  }
+}
+
+setupTests()
+afterEach(cleanup)
+
+test('it should render FormattedDate and have a formated pt date', () => {
+  const { container } = renderWithReactIntl(<FormatDateView />)
+  expect(getByTestId(container, 'date-display')).toHaveTextContent('11/03/2019')
+})
+```

website/sidebars.json

@@ -12,6 +12,7 @@
       "example-input-event",
       "example-update-props",
       "example-react-context",
+      "example-react-intl",
       "example-react-redux",
       "example-react-router",
       "example-reach-router",

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+