Translate Website (Web Translator)

A website translation sdk from Vitra.ai

Installation

Install with npm

  npm install vitra-web-translator

Usage/Examples

Import css file in _app.tsx

import 'vitra-web-translator/dist/esm/styles/index.css';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
    </>
  );
}

Create a Common Component

import React, { FC, ReactNode } from 'react';
import { VitraWebTranslator } from 'vitra-web-translator';

type Props = {
  children: ReactNode,
};

const Layout: FC<Props> = ({ children }) => {
  return (
    <VitraWebTranslator
      apiKey="vitra.VjopflOAtjF9coT7U3_*********_*"
      glossaryId="*************"
      position="center-right"
      theme="dark"
    >
      {children}
    </VitraWebTranslator>
  );
};

export default Layout;

Use the common component anywhere in your app

import React from 'react';
import Layout from './Layout';

const Demo = () => {
  return (
    <Layout>
      <h1>This is a demo component</h1>
    </Layout>
  );
};

export default Demo;

Props

| Prop | Type | Required | Description | Possible Values | Default | | ----------------- | ------- | -------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | apiKey | string | Yes | API Key generated from Vitra Web Translator site | API KEY | null | | glossaryId | string | Yes | Glossary Id generated from Vitra Web Translator site | GLOSSARY ID | null | | theme | string | Yes | Theme of the language selector | 'dark' | 'blue' | 'pink' | 'yellow' | dark | | position | string | Yes | Position of the language selector dropdown if it is floating | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center-center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center-right' | | floating | boolean | No | Dropdown default floating behaviour | true/false | true | | dropdownDirection | string | No | Dropdown menu open direction | 'up' | 'down' | 'down' |

Custom dropdown positioning

If you want to set custom position of the dropdown then please follow below instruction

1. Set floating props to false
2. Adjust dropdownDirection props as per your need.
3. Style dropdown as per your requirement. Example below-

#vitra-lang-select {
  position: absolute !important;
  top: 100px !important;
  right: 10px !important;
}

@media only screen and (max-width: 600px) {
  #vitra-lang-select {
    position: absolute !important;
    top: 500px !important;
    right: 10px !important;
  }
}

Ignore translation

If you want to block translation for any html block then add notranslate="true" attribute to that html element Example-

<div notranslate="true">TEXT</div>

Support

For support, email [email protected].