React-weglot NPM

React Component to Integrate Weglot Translation Widget

You can use this component to easily integrate Weglot Translation Widget into ReactJS or NextJS projects. TypeScript is also supported.

Usage

Setting Up Weglot

Login to Weglot
Setup translation for body or any other appropriate tag.
Make sure to add all the languages you need
Copy the api_key. This would be in format wg_[0-f]{32} (wg_ followed by 32 hexademical characters)

Installing `react-weglot`

Install react-weglot

yarn add react-weglot

npm i react-weglot

Import useWeglot

import { useWeglot } from 'react-weglot';

Create the lang and setLang variables using useWeglot() inside your component. (Optional) pass in the default language.

const [lang, setLang] = useWeglot('wg_00000000000000000000000000000000', 'en');

Now use these inside your functionality of buttons or loaders.

import { useWeglot } from 'react-weglot';

export const Weglot = () => {
    const [lang, setLang] = useWeglot('wg_00000000000000000000000000000000', 'en');
    return (
        <div>
            <p>Current language: {lang}</p>
            <button onClick={() => setLang('en')}>EN</button>
            <button onClick={() => setLang('fr')}>FR</button>
            <button onClick={() => setLang('es')}>ES</button>
        </div>
    );
};