diff --git a/docs/ref/react.rst b/docs/ref/react.rst index 1d9283db6..31177d32a 100644 --- a/docs/ref/react.rst +++ b/docs/ref/react.rst @@ -416,6 +416,65 @@ top-level application component. However, if the ``language`` is stored in a ); } +I18n +---- + +.. component:: I18n + + :param bool update: Subscribe to catalog and activate language updates + +:component:`I18n` injects ``i18n`` object and ``i18nHash`` to child component, which +may be lambda component, regular component or React element. This pattern is +known as `render prop component `_. + +If want to use ``i18n`` object in instance or lifecycle methods, consider using +:js:func:`withI18n` high-order component. + +``i18nHash`` is useful when rendering pure components or elements as it contains +hash of active language and catalogs. Instead of comparing ``i18n`` object it's +enough to compare ``i18nHash`` to decide if component should update. + +Using lambda components: + +.. code-block:: jsx + + import React from "react" + import { I18n } from "@lingui/react" + + function LogoutIcon = () => ( + return ( + + {({ i18n }) => } + + ) + ) + +Using components and elements: + +.. code-block:: jsx + + import React from "react" + import { I18n } from "@lingui/react" + + function TranslatedComponent({ i18n }) { + return + } + + function RenderingElements = () => ( + return ( + + + + ) + ) + + function RenderingComponents = () => ( + return ( + {TranslatedComponent} + ) + ) + + withI18n -------- diff --git a/packages/react/src/I18n.js b/packages/react/src/I18n.js index 5ac2218f1..d004a5627 100644 --- a/packages/react/src/I18n.js +++ b/packages/react/src/I18n.js @@ -6,7 +6,6 @@ export default class I18n extends React.Component<*, *> { static defaultProps = { update: true, withHash: true, - withRef: false } static contextTypes = { diff --git a/packages/react/src/withI18n.js b/packages/react/src/withI18n.js index 4e197a338..fe20ef37c 100644 --- a/packages/react/src/withI18n.js +++ b/packages/react/src/withI18n.js @@ -60,7 +60,7 @@ const withI18n = (options: withI18nOptions = {}) => } return ( - {i18nProps => } + ) } diff --git a/packages/react/src/withI18n.test.js b/packages/react/src/withI18n.test.js index 3df465401..8115e0623 100644 --- a/packages/react/src/withI18n.test.js +++ b/packages/react/src/withI18n.test.js @@ -25,8 +25,6 @@ describe("withI18n", function() { const spy = jest.fn() const Sink = withI18n(options)( class Sink extends React.Component<*> { - customMethod = () => 42 - render() { spy(this.props) return
@@ -154,11 +152,18 @@ describe("withI18n", function() { }) it("should hold ref to wrapped instance when withRef is enabled", function() { - const { node } = mountHoc({}, { withRef: true }) - const hoc = node.instance() - expect(hoc.getWrappedInstance()).not.toBeNull() - expect(hoc.getWrappedInstance().customMethod).not.toBeNull() - expect(hoc.getWrappedInstance().customMethod()).toEqual(42) + class Component extends React.Component<*> { + customMethod = () => 42 + render() { + return null + } + } + const WrappedComponent = withI18n({ withRef: true })(Component) + + const node = mount().instance() + expect(node.getWrappedInstance()).not.toBeNull() + expect(node.getWrappedInstance().customMethod).toBeDefined() + expect(node.getWrappedInstance().customMethod()).toEqual(42) }) it("should not hold ref to wrapped instance when withRef is disabled", function() {