# react-transliteration

> Transliteration library which helps you to transliterate and support 15+ indian languages using google input tools

Latest version **0.2.2** (published 2024-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-transliteration
pnpm add react-transliteration
yarn add react-transliteration
bun add react-transliteration
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2024-05-26 |
| First published | 2024-04-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 30.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | dev.imsaurabh |
| Maintainers | dev.imsaurabh |
| Keywords | react-transliteration, transliteration, npm transliteration library, transliteration library, react-transliterate, transliteration, english to hindi transliteration, enslish to hindi transliteration, english to tamil transliteration, english to bengali transliteration, english to telegu transliteration, english to urdu transliteration, english to punjabi transliteration, english to marathi transliteration |

## Links

- npm: https://www.npmjs.com/package/react-transliteration
- Repository: https://github.com/dev-Imsaurabh/react-transliteration
- Homepage: https://btyping.online/
- Issues: https://github.com/dev-Imsaurabh/react-transliteration/issues
- npm.io page: https://npm.io/package/react-transliteration

## Dependencies (2)

- [axios](https://npm.io/package/axios.md) ^1.6.8
- [textarea-caret](https://npm.io/package/textarea-caret.md) ^3.1.0

## Recent versions

- 0.2.2 (latest) — 2024-05-26
- 0.2.1 — 2024-05-26
- 0.2.0 — 2024-05-26
- 0.1.9 — 2024-05-26
- 0.1.8 — 2024-05-26
- 0.1.7 — 2024-05-26
- 0.1.6 — 2024-04-18
- 0.1.5 — 2024-04-16
- 0.1.4 — 2024-04-15
- 0.1.3 — 2024-04-15
- 0.1.2 — 2024-04-14
- 0.1.1 — 2024-04-14
- 0.1.0 — 2024-04-13
- 0.0.9 — 2024-04-13
- 0.0.8 — 2024-04-13
- … 7 more at https://npm.io/package/react-transliteration/versions

## README

# Welcome to react-transliteration
Introducing react-transliteration, the ultimate solution for effortless and accurate transliteration across over 15+ Indian languages. Seamlessly integrated and intuitively designed, it's your go-to tool for transforming text from one script to another with ease. With intelligent suggestion system and customizable options, streamline your transliteration process and revolutionize your projects today by integrating this powerful tool from npm.

# Demo

  [Checkout live demo of the component. Click here](https://btyping.online/)

# Installation

    npm i react-transliteration

## Boilerplate

    import {ReactTransliteration, ActionKeys} from "react-transliteration"
    export default function TransliterationTool () {
    
	      const [text, setText] =  useState("")
		  const  textRef  =  useRef(null)
		  
	      return <div  className="App"  style={{ height:  "400px", padding: "18px" }}> 
                <ReactTransliteration 
                        text={text} 
                        onChangeText={(t) =>  setText(t)}
                        textRef={textRef}  keys={[ActionKeys.KEY_ENTER, ActionKeys.KEY_SPACE]}
                        enabled={true}
                        language='hi'
                        suggestionDivStyle={{ textAlign:  "center" }}
                        activeItemStyle={{ minWidth:  "70px", minHeight:  "40px", display:  "grid", placeItems:  "center", backgroundColor:  "green" }}
                        placeholder="Powered By React Transliteration..."
                        textAreaStyle={{ padding:  '8px' }}
                        attr = {{name:"text"}}
                        />
                </div>
    }

## Visuals

![enter image description here](https://res.cloudinary.com/ducgyycpy/image/upload/v1713013463/Macbook-Air-localhost_5_pbf6sz.png)

## Props 

| props| explaination|
|--|--|
| **language** (string)* | set language code for transliteration eg: **hi**, **bn**, **bho** ..etc
| **renderKey** (any) | forces component to **re-render**
| **text** (string)* | contains value of the text-area 
| **onChangeText** (Callback Func)* | listen to any change in text-area
| **keys** (Array)* | pass the keys you want to be trigger the transliteration 
| **textRef** (RefObject)* | text-area node ref. helps you to control anything from outside of component in text-area
| **enabled** (boolean)* | enable or disable suggestion by default its **true**
| **mainDivStyle** (React.CSSProperties) | custom styles for main div
| **suggestionDivStyle** (React.CSSProperties) | custom styles for suggestion div
| **suggestionItemStyle** (React.CSSProperties) | custom styles for suggestion items
| **activeItemStyle** (React.CSSProperties) |custom styles for suggestion div item [if active]
| **textAreaStyle** (React.CSSProperties) | custom styles for your textarea
| **attr** (React.HTMLProps<HTMLTextAreaElement>) | custom attributes for your textarea
| **placeholder** (string) | placeholder for textarea
| **offsetX** (number) | manipulate the suggestion div offsetX [from left]
| **offsetY** (number) | manipulate the suggestion div offsetY [from top]

> Props with **(*)** are required for functioning of component.

## Supported Languages 

| ISO 639 code | Language             |
|--------------|----------------------|
|bn            |Bangla - বাংলা       |
|gu            |Gujarati - ગુજરાતી   |
|hi            |Hindi - हिंदी         |
|kn            |Kannada - ಕನ್ನಡ     |
|ml            |Malayalam - മലയാളം  |
|mr            |Marathi - मराठी       |
|ne            |Nepali - नेपाली 	    |
|or            |Oriya - ଓଡ଼ିଆ         |
|pa            |Panjabi - ਪੰਜਾਬੀ      |
|sa            |Sanskrit - संस्कृतम् 	 |
|si            |Sinhala - සිංහල     |
|ta            |Tamil - தமிழ்       |
|te            |Telugu - తెలుగు      |
|ur            |Urdu - اُردُو         |
|am            |Amharic - አማርኛ       |
|th            |Thai - ไทย              |
|ti            |Tigrinya - ትግርኛ        |

## 7. License
MIT © dev.imsaurabh

---
_Source: https://npm.io/package/react-transliteration · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._