# React

<div data-full-width="false"><figure><img src="https://2882497650-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlSwSLv4rxz1bDG6bzOP2%2Fuploads%2FMuRmdJOuHPiwwz52OdC9%2Fdocreact.png?alt=media&#x26;token=85787b84-7d73-4c0d-8352-b6899310509c" alt="LingoJs react integration" width="375"><figcaption></figcaption></figure></div>

#### 1. **Install the LingoJS Script**

First, include the LingoJS script in your `public/index.html` file. This can be done by adding the `<script>` tag directly in your HTML. Ensure that the LingoJS script is loaded in your application.

```html
<!-- In public/index.html -->
<script src="https://cdn.jsdelivr.net/gh/Flowcodelab/LingoJs@main/lingo-snippet.obf.js"></script>
```

#### 2. **Initialize LingoJS in Your React App**

Once the script is included, you'll need to initialize LingoJS in your React app. You can do this in your `App.js` or a component where you want to handle the language settings.

```javascript
import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    // Initialize LingoJS on component mount
    if (window.lingojs && window.lingojs.initialize) {
      window.lingojs.initialize({
        projectKey: 'Your project key',
        targetLanguage: 'de', // Define your language logic or function to get the current language
        baseLanguage: 'en',
        rememberLanguage: true , // Decide whether to remember the user's language setting
        showWidget: true // Decide whether to show the language change widget
      });
    }
  }, []);

  const changeLanguage = async (lang) => {
    if (window.lingojs) {
      await window.lingojs.changeLanguage(lang);
    }
  };

  return (
    <div className="App">
      <h1>Hello World</h1>
      <button onClick={() => changeLanguage('fr')}>Change Language to French</button>
    </div>
  );
};

export default App;
```

#### 3. **Change Language Dynamically**

To change the language dynamically, you can call the `window.lingojs.changeLanguage()` function. It takes the ISO 639-1 language code as an argument.

For example, to change the language to French, you would call:

```javascript
await window.lingojs.changeLanguage('fr');
```

#### 4. **Handling Dynamic Content**

LingoJS will automatically detect text content on your page and send it to the dashboard for translation. However, if you have content that should not be translated, you can use the `translate` attribute to control translation behavior.

**Disabling Translation for an Element:**

To prevent certain elements from being translated, add the `translate="no"` attribute to them:

```html
<p translate="no">This text will not be translated.</p>
```

**Handling Dynamic Variables:**

For dynamic variables (content that shouldn't be translated within a sentence), use the `<var></var>` tag. This allows the dynamic content to be shown in the dashboard but keeps it empty for translation purposes.

```html
<p>This is a sentence with a dynamic value: <var>dynamicValue</var></p>
```

This ensures that the dynamic content won't be misinterpreted or altered in the translation process.

#### 5. **Additional Setup Options**

* **Remember Language:** If you want the language choice to persist (i.e., for users to see the same language on returning visits), you can set `rememberLanguage: true` in the initialization.
* **Translation Widget:** If you want to display a translation widget (for users to change the language on their own), you can enable it by setting `showWidget: true`.

#### 6. **Important Notes:**

* Do not modify HTML tags in the LingoJS dashboard. The translations are automatically generated to ensure they retain the proper attributes (e.g., classes, styles) from the DOM.
* Ensure that your `projectKey` is correctly configured for your LingoJS project.

#### Example Full Integration in `App.js`:

```javascript
import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    // Initialize LingoJS when the app is mounted
    if (window.lingojs && window.lingojs.initialize) {
      window.lingojs.initialize({
        projectKey: 'Your project key',
        targetLanguage: 'de',
        baseLanguage: 'en',
        rememberLanguage: true,
        showWidget: true
      });
    }
  }, []);

  // Function to change the language dynamically
  const changeLanguage = async (lang) => {
    if (window.lingojs) {
      await window.lingojs.changeLanguage(lang);
    }
  };

  return (
    <div className="App">
      <h1>Hello World</h1>
      <button onClick={() => changeLanguage('fr')}>Change Language to French</button>
    </div>
  );
};

export default App;
```

{% hint style="danger" %}

#### **⚠️ Attention: Modifying HTML Tags in the Dashboard**

When you edit a translation in the LingoJS dashboard, **do not modify the HTML tags** (like `<div>`, `<span>`, or `<p>`) within the translation interface. These tags are automatically generated by LingoJS as decorators to maintain their structure and ensure proper styling and functionality on your site.

Changing these HTML elements in the dashboard could lead to issues, such as:

* **Loss of formatting**: The translations might not retain their original structure or styling.
* **Breaking functionality**: Tags like `<div>`, `<span>`, or other elements might carry important attributes (like `class` or `id`), which are necessary for your layout and interactivity.
  {% endhint %}

#### **Why is this Important?**

LingoJS automatically generates these HTML elements in the translation process, which are then reused in your website’s DOM once the translations are applied. Modifying these tags in the dashboard would disrupt this process, causing translations to break or misalign with the intended design.

#### Conclusion

By following these steps, you can successfully integrate LingoJS into your React project. LingoJS will automatically handle text translations and allow dynamic language switching through the API.