vitra-web-translator

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

• Set floating props to false
• Adjust dropdownDirection props as per your need.
• 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 [e-mail].