Preeti to unicode input

This React component provides an input (or a textarea) field that automatically converts the user's preeti font input into Unicode format. The component is customizable and integrates seamlessly into any react-hook-form.

Features

1. Type in Preeti font and get converted to unicode in same input box or textarea
2. Write in preeti font or in english font in same input (using alt + i to toggle language)
3. Customise input box and textarea
4. Supports shadcn form, zod validation, tailwind css (see examples below)
5. Support hrashwo akar ि as per preeti font typing. For example type ls and get कि.
6. Provide props as required like className, style, etc. (see examples below).

Installation

Install it to your react project with npm

  npm install preeti-to-unicode-input

Usage/Examples

import PreetiToUnicodeInput from "preeti-to-unicode-input";
import { useState } from "react";

const MyForm = () => {
  const [inputValue, setInputValue] = useState("");

  return (
    <form>
      <PreetiToUnicodeInput 
        value={inputValue} 
        onChange={(val) => setInputValue(val)}
      />
    </form>
  );
};

Props

returns following dom elements that can be customised by you.

<div as container>
    <input or textarea/>
    <button for language toggle>
</div>

| Props | Optional | Parameters | Description | | :-------- | :------- | :------- | :------------------------- | | value | Optional |string| You can set value as initial props | | inputType | Optional |string| Set type of input to input or textarea by providing inputType props as "input" or "textarea". Default is input| | onChange | Optional |Functional Component| Use it if you want to process unicode value returned from component or update variable/state | | enableEnglishLanguageToggle | Optional |boolean| If you want user to enable switching english and preeti unicode in same input box.| | containerProps | Optional |React.HTMLAttributes <HTMLDivElement>| The props will be spread in container div | | inputProps | Optional |React.InputHTMLAttributes <HTMLInputElement>| The props will be spread in input element | | buttonProps | Optional |React.ButtonHTMLAttributes <HTMLButtonElement>| The props will be spread in button component |

More Examples

Example 1

import PreetiToUnicodeInput from "preeti-to-unicode-input";
import { useState } from "react";

const MyForm = () => {
  const [inputValue, setInputValue] = useState("");

  return (
    <form>
      <PreetiToUnicodeInput
            inputType="textarea"
            enableEnglishLanguageToggle={true}
            onChange={console.log} 
            inputProps={{
            placeholder: "Enter your text here",
            className: "custom-classname",
            }}
            containerProps={{ style: { width: "50%" } }}
       />
    </form>
  );
};

Example 2 Working with zod validation, zod resolver, react-hook-form and shadcn components

import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import PreetiToUnicodeInput from "preeti-to-unicode-input";
// Import Shadcn form components
import {
  Form,
  FormField,
  FormItem,
  FormControl,
  FormLabel,
  FormMessage,
} from "./components/ui/form";
import { Input } from "./components/ui/input";

// Define Zod schema for validation
const formSchema = z.object({
  normalInput: z
    .string()
    .min(4, { message: "Input must be at least 4 character" }),
  preetiInput: z
    .string()
    .min(3, { message: "Input must be at least 3 characters" })
    .max(50, { message: "Input must be less than 50 characters" }),
});

const MyForm = () => {
  // Initialize react-hook-form with Zod resolver
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      normalInput: "",
      preetiInput: "", // Default form value for the input
    },
  });

  const onSubmit = (data: any) => {
    console.log("Form Data:", data); // Log submitted form data
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          name="normalInput"
          control={form.control}
          render={({ field }) => (
            <FormItem>
              <FormLabel>Normal Input</FormLabel>
              <FormControl>
                <Input placeholder="shadcn" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          name="preetiInput"
          render={({ field }) => (
            <FormItem>
              <FormLabel>My Input</FormLabel>
              <FormControl>
                <PreetiToUnicodeInput
                  inputType="textarea"
                  enableEnglishLanguageToggle={true}
                  value={field.value}
                  onChange={field.onChange}
                  inputProps={{
                    ...field,
                    placeholder: "Type in Preeti here",
                    className: "custom-classname",
                  }}
                  containerProps={{ style: { width: "50%" } }}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <button type="submit">Submit</button>
      </form>
    </Form>
  );
};

export default MyForm;