feat: remove withI18n (#1503)

packages/react/src/I18nProvider.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { act, render } from "@testing-library/react"
 
-import { withI18n, I18nProvider } from "./I18nProvider"
+import { I18nProvider, useLingui } from "./I18nProvider"
 import { setupI18n } from "@lingui/core"
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { mockConsole } from "@lingui/jest-mocks"
@@ -15,16 +15,19 @@ describe("I18nProvider", () => {
       },
     })
 
-    const WithoutHoc = (props) => {
+    const WithoutLingui = (props) => {
       return <div {...props}>{props?.i18n?.locale}</div>
     }
 
-    const WithHoc = withI18n()(WithoutHoc)
+    const WithLingui = (props) => {
+      const { i18n } = useLingui()
+      return <WithoutLingui i18n={i18n} {...props} />
+    }
 
     const { getByTestId } = render(
       <I18nProvider i18n={i18n}>
-        <WithoutHoc data-testid="not-composed" />
-        <WithHoc data-testid="composed" />
+        <WithoutLingui data-testid="not-composed" />
+        <WithLingui data-testid="composed" />
       </I18nProvider>
     )
 

packages/react/src/I18nProvider.tsx

@@ -7,10 +7,6 @@ export type I18nContext = {
   defaultComponent?: ComponentType<TransRenderProps>
 }
 
-export type withI18nProps = {
-  i18n: I18n
-}
-
 export type I18nProviderProps = I18nContext & {
   forceRenderOnLocaleChange?: boolean
   children?: React.ReactNode
@@ -30,31 +26,6 @@ export function useLingui(): I18nContext {
   return context
 }
 
-export function withI18n(
-  o?: object
-): <P extends withI18nProps>(
-  Component: ComponentType<P>
-) => React.ComponentType<Omit<P, "i18n">> {
-  return <P extends withI18nProps>(
-    WrappedComponent: ComponentType<P>
-  ): ComponentType<P> => {
-    return (props) => {
-      if (process.env.NODE_ENV !== "production") {
-        if (typeof o === "function" || React.isValidElement(o)) {
-          throw new Error(
-            "withI18n([options]) takes options as a first argument, " +
-              "but received React component itself. Without options, the Component " +
-              "should be wrapped as withI18n()(Component), not withI18n(Component)."
-          )
-        }
-      }
-
-      const { i18n } = useLingui()
-      return <WrappedComponent {...props} i18n={i18n} />
-    }
-  }
-}
-
 export const I18nProvider: FunctionComponent<I18nProviderProps> = ({
   i18n,
   defaultComponent,

packages/react/src/index.ts

@@ -1,10 +1,6 @@
-export { I18nProvider, useLingui, withI18n } from "./I18nProvider"
+export { I18nProvider, useLingui } from "./I18nProvider"
 
-export type {
-  I18nProviderProps,
-  I18nContext,
-  withI18nProps,
-} from "./I18nProvider"
+export type { I18nProviderProps, I18nContext } from "./I18nProvider"
 
 export { Trans } from "./Trans"
 export type { TransProps, TransRenderProps } from "./Trans"

website/docs/guides/testing.md

@@ -1,6 +1,6 @@
 # Testing
 
-Components using [`Trans`](/docs/ref/react.md#trans), [`withI18n`](/docs/ref/react.md#withi18n) or [`useLingui`](/docs/ref/react.md#uselingui) require access to the context of [`I18nProvider`](/docs/ref/react.md#i18nprovider). How you can wrap your component with the I18nProvider depends on the test library you use.
+Components using [`Trans`](/docs/ref/react.md#trans) or [`useLingui`](/docs/ref/react.md#uselingui) require access to the context of [`I18nProvider`](/docs/ref/react.md#i18nprovider). How you can wrap your component with the I18nProvider depends on the test library you use.
 
 Here is a working example with [react-testing-library](https://testing-library.com/docs/react-testing-library/intro/), using the [wrapper-property](https://testing-library.com/docs/react-testing-library/api#wrapper):
 

website/docs/misc/react-intl.md

@@ -191,7 +191,7 @@ Custom IDs are supported as well:
 ```
 
 :::note
-To inject `i18n` object into props, you need to use HOC [`withI18n`](/docs/ref/react.md#withi18n). It's very similar to `injectIntl` from [react-intl](https://github.com/yahoo/react-intl). Alternatively, you can also use `I18n` render prop component.
+To inject `i18n` object into props, you need to use [`useLingui`](/docs/ref/react.md#useLingui) hook. It's very similar to `useIntl` from [react-intl](https://formatjs.io/docs/react-intl/api/#useintl-hook).
 :::
 
 ## External message catalog

website/docs/ref/react.md

@@ -113,7 +113,7 @@ import { Trans } from '@lingui/react';
 
 ## Providers
 
-Message catalogs and the active locale are passed to the context in [`I18nProvider`](#i18nprovider). Use [`useLingui`](#uselingui) hook or [`withI18n`](#withi18n) high-order component to access Lingui context.
+Message catalogs and the active locale are passed to the context in [`I18nProvider`](#i18nprovider). Use [`useLingui`](#uselingui) hook to access Lingui context.
 
 ### I18nProvider
 
@@ -195,16 +195,3 @@ const CurrentLocale = () => {
    return <span>Current locale: {i18n.locale}</span>
 }
 ```
-
-### withI18n
-
-`withI18n` is a higher-order component which injects `i18n` object to wrapped component. `i18n` object is needed when you have to access the i18n data:
-
-``` jsx
-import React from "react"
-import { withI18n } from "@lingui/react"
-
-const CurrentLocale = withI18n()(({ i18n }) => (
-   <span>Current locale: {i18n.locale}</span>
-))
-```

website/docs/releases/migration-4.md

@@ -165,3 +165,9 @@ You can safely remove `i18n.loadLocaleData` calls because Lingui v4 uses `Intl.P
 ```
 
 Don't forget to delete `make-plural` from your `package.json`.
+
+### withI18n HOC was removed
+
+`withI18n` HOC was removed in favor of `useLingui` hook. Please use `useLingui` instead.
+
+If you need to use `withI18n` in your project, you can copy [the original implementation](https://github.com/lingui/js-lingui/blob/31dcab5a9a8f88bfa8b3a2c7cd12aa2d908a1d80/packages/react/src/I18nProvider.tsx#L33).

website/sidebars.ts

@@ -84,11 +84,6 @@ const sidebar = [
         label: 'Dynamic loading',
         id: 'guides/dynamic-loading-catalogs',
       },
-      {
-        type: 'doc',
-        label: 'Optimized components',
-        id: 'guides/optimized-components',
-      },
       {
         type: 'doc',
         label: 'Pluralization',