-
- - Hello {name}, LinguiJS is a readable, automated, and optimized (5 kb) - internationalization for JavaScript. -
- -- Read the documentation - for more info. -
- - {numUsers === 1 ? ( - - Only one user is using this library! - - ) : ( - - {numUsers} users are using this library! - - )} -
-
-
- {/* Variables are passed to messages in the same way as in JSX */}
-
-
-
-
- {/* Variables are passed to messages in the same way as in JSX */}
-
- {/* Also React Elements inside messages works in the same way as in JSX */}
-
Read the documentation.
- -In `react-intl`_, this would be translated as: - -.. code-block:: jsx - -- Read the documentation. -
- -All we need to do is to wrap the message in a :jsxmacro:`Trans` macro: - -.. code-block:: html - -
-
-
-
- See all unread messages{" or "} - mark them as read. -
- -Although it looks complex, there's really nothing special here. Just wrap the content -of the paragraph in :jsxmacro:`Trans` and let the macro do the magic: - -.. code-block:: html - -
-
- { - messagesCount === 1 - ? `There's ${messagesCount} message in your inbox.` - : `There are ${messagesCount} messages in your inbox.` - } -
- -This message is a bit special, because it depends on the value of the ``messagesCount`` -variable. Most languages use different forms of words when describing quantities -- this is called `pluralization
-
-
-
-
+
+
+ {/* Variables are passed to messages in the same way as in JSX */}
+
+
Read the documentation.
+``` + +In [react-intl](https://github.com/yahoo/react-intl), this would be translated as: + +``` jsx ++ Read the documentation. +
+``` + +All we need to do is to wrap the message in a [`Trans`](/docs/ref/macro.md#trans) macro: + +``` html +
+
+
+
+
+
+
+ Use it everywhere. @lingui/core provides the essential intl functionality which works in any
+ JavaScript project, while @lingui/react offers components for leveraging React rendering.
+
+ Manage the whole intl workflow using Lingui CLI. It extracts messages from source code, validates messages from + translators and checks that all messages are translated before shipping to production. +
+ ), + image: 'tooling.png', + additionalClass: '', + }, + { + title: 'Full Rich-Text Support', + description: ( ++ Use React components inside localized messages without any limitations. Writing rich-text messages is as easy as + writing JSX. +
+ ), + image: 'rich-text.svg', + additionalClass: '', + }, + { + title: 'Headache-Free Professional Localization', + description: ( +Candidate knows 1 language, but{' '}
+
+ Candidate knows 10 languages
+
+ .
+ + You don't have to know how many plurals the language has. Create a product in one language, and deliver a + perfect translation to users. Lingui follows Unicode ICU standards to handle plurals, genders, and selects. +
++ Integrate Lingui into your existing workflow. It supports message keys as well as auto-generated messages. + Translations are stored in JSON or standard PO file, which is supported in almost all translation tools. +
+ ), + image: 'all-platforms.svg', + additionalClass: '', + }, + { + title: 'Verified by Thousands of People', + description: ( ++ Lingui has been used and tested by thousands of satisfied users and has been proven to provide accurate and + efficient i18n and l10n results. Join the thousands of satisfied customers. +
+ ), + image: 'verified.svg', + additionalClass: '', + }, + { + title: 'Battle-Proven & Future Proof', + description: ( +
+ During the last 7 years, we've seen a lot of localization projects and developed a tool to handle them all.
+
+ If your team needs to edit source texts without developer involvement, or you want the ability to deliver the
+ most recent translations directly to your customers – we've got you covered.
+
+ Lingui is a general-purpose framework with bindings for React. Use it on a server in Node.js or Vanilla
+ JavaScript.
+
A set of optional modules would implement lazy loading of language packs, user locale detection, and more.
+
+ With Lingui, you have access to a powerful i18n tool at no cost and our team is always available to assist you + with any questions. +
+ ), + image: 'free.svg', + additionalClass: '', + }, +]; + +const FeatureCard = ({ title, description, image, additionalClass }: FeatureDetails): React.ReactElement => ( +
+ 
+ 
+ + JavaScript library for internalization (i18n) of JavaScript projects, including React, Vue, Node.js, and + Angular. +
+ +})
+ {user.name}
+ + ))} +And many more...
+