vitra-web-translator
v1.0.41
Published
Vitra Translation on Fly
Downloads
295
Readme
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' |
Support
For support, email [email protected].