Built in support for nepali unicode typing

[dev-sandip]

import { useEffect, useRef, useState } from 'react';
import nepalify from 'nepalify';

function App() {
  const [formattedText, setFormattedText] = useState('');
  const inputRef = useRef(null);

  useEffect(() => {
    // Intercept keypresses on the input element for real-time Nepali typing
    const interceptedInput = nepalify.interceptElementById("nepali-input", {
      layout: "romanized", // Use "traditional" for traditional typing
    });

    return () => {
      interceptedInput.disable();
    };
  }, []);

  const handleFormatChange = (e) => {
    const text = e.target.value;
    const nepaliText = nepalify.format(text, { layout: "romanized" });
    setFormattedText(nepaliText);
  };

  return (
    <div style={{ maxWidth: "500px", margin: "20px auto", textAlign: "center" }}>
      <h1>Nepali Unicode Typing</h1>

      <label htmlFor="nepali-input">Live Nepali Typing (Romanized):</label>
      <input
        id="nepali-input"
        type="text"
        placeholder="Type here..."
        ref={inputRef}
        style={{
          width: "100%",
          padding: "10px",
          margin: "10px 0",
          fontSize: "1rem",
          border: "1px solid #ddd",
          borderRadius: "4px",
        }}
      />

      <label htmlFor="manual-input">Format Text Manually:</label>
      <input
        id="manual-input"
        type="text"
        placeholder="Type here to convert manually"
        onChange={handleFormatChange}
        style={{
          width: "100%",
          padding: "10px",
          margin: "10px 0",
          fontSize: "1rem",
          border: "1px solid #ddd",
          borderRadius: "4px",
        }}
      />
      <p>Formatted Text: {formattedText}</p>
    </div>
  );
}

export default App;

This is the basic implementation using Nepalify package and we can make seperate page for writing nepali and can paste in the form . But better to implement hamro keyboard type nepali typing in the form