npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-transliteration

v0.2.2

Published

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

Downloads

19

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

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

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) | 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