gt-react 10.9.2 → 10.10.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # gt-react
 
+## 10.9.3
+
+### Patch Changes
+
+- [#888](https://github.com/generaltranslation/gt/pull/888) [`6314624`](https://github.com/generaltranslation/gt/commit/6314624cd6d537e236e7208b1097dc137befab66) Thanks [@ErnestM1234](https://github.com/ErnestM1234)! - fix: readme
+
 ## 10.9.2
 
 ### Patch Changes

package/README.md

@@ -16,101 +16,82 @@ Install `gt-react` via npm:
 
 ```bash
 npm install gt-react
-npm install gt-react-cli --save-dev
+npm install gtx-cli --save-dev
 ```
 
 ## Getting Started
 
-### Step 1: Configure Your Environment Variables
+Follow the [Quick Start Guide](https://generaltranslation.com/docs/react) or run the setup wizard: `npx gtx-cli init` and add the [`<GTProvider>`](https://generaltranslation.com/en-US/docs/react#gtprovider) to your app.
 
-Add the following environment variables to your `.env` file:
+Translate everything inside of the `<T>` component.
 
-```
-GT_API_KEY="your-api-key"
-GT_PROJECT_ID="your-project-id"
+```jsx
+<T>
+  <p>This gets translated!</p>
+  <div>This also gets translated!</divs>
+</T>
 ```
 
-- Get your `API Key` and `Project ID` from the [General Translation Dashboard](https://generaltranslation.com).
+## Documentation
 
-### 2. Select languages
+Full documentation, including guides, examples, and API references, can be found at [General Translation Docs](generaltranslation.com/docs).
 
-`<GTProvider>` is used to configure the behavior of `gt-react`.
-It should be placed as high up in your app as possible, ideally at the root.
+## Features
 
-Just pass a list of [locale codes](https://generaltranslation.com/docs/platform/locale-strings#supported-locales) to add them to your app.
+### Jsx Translation
 
 ```jsx
-import { GTProvider } from 'gt-react';
-import MyApp from './MyApp';
-
-export default function App() {
-  return (
-    <GTProvider locales={['fr', 'zh']}>
-      {' '}
-      // French and Chinese support
-      <MyApp />
-    </GTProvider>
-  );
-}
+<T>
+  Translate anything inside of a {'<T>'} component!
+  <div>Including nested structures</div>
+</T>
 ```
 
-### 3. Add the `<T>` component
-
-Wrap any nested JSX content in the `<T>` component to make it translatable.
-For more information, check out the [guide on using `<T>` components](https://generaltranslation.com/docs/react/reference/t-reference).
+### Inline string translation
 
 ```jsx
-import { T } from 'gt-react';
-
-export default function Example() {
-  return (
-    <T>
-      <p>This gets translated.</p>
-    </T>
-  );
+function MyComponent() {
+  const gt = useGT();
+  return <>{gt('Strings as well!')}</>;
 }
 ```
 
-Use the `<Var>` component to designate JSX content that should not be translated.
+### Dictionary translation
 
-```jsx
-import { T, Var } from 'gt-react';
-
-export default function Example() {
-  return (
-    <T>
-      <p>
-        This gets translated. <Var>This does not.</Var>
-      </p>
-    </T>
-  );
+```json
+{
+  "key": "Hello, World!"
 }
 ```
 
-**Tip:**
-To save time, run the setup command.
-It will scan your codebase for translatable JSX and insert the `<T>` tags for you.
-
-```bash title="shell" copy
-npx gt-react-cli setup
+```jsx
+function MyComponent() {
+  const t = useTranslations();
+  return <>{t('key')}</>;
+}
 ```
 
-**Strings:**
-For strings, you can use `useGT()` for translation.
-For more information, check out [this guide](/docs/react/tutorials/translating-strings).
+### Pluralization
 
-```jsx
-import { useGT } from 'gt-react';
+Support for pluralization and conditional branching
 
-export default function Example() {
-  const t = useGT();
-  return <p>{t('This gets translated.')}</p>;
-}
+```jsx
+<T>
+  <Plural
+    n={count}
+    singular="There is 1 person"
+    plural={<>There are <Num>{count}</Num> people}
+  />
+</T>
 ```
 
-## Documentation
+### Formatting
 
-Full documentation, including guides, examples, and API references, can be found at [General Translation Docs](generaltranslation.com/docs).
+Support for number, currency, date time, and dynamic variables
+
+```jsx
+<Num options={{ style: 'currency', currency: 'EUR' }}>{1000}</Num>
+```
 
 ## Contributing