Skip to main content

Documentation Index

Fetch the complete documentation index at: https://developers.remeinium.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

The library provides a React hook to easily integrate Singlish typing into your React applications.

​
useSinglishConverter

A hook that manages the state of a textarea input, handling cursor position, selection, and Singlish conversion automatically. 
import { useSinglishConverter } from '@siyabasa/singlish';

const { inputProps, value, toggle } = useSinglishConverter(options);

​
Parameters

options (UseSinglishConverterOptions, optional): 
interface UseSinglishConverterOptions {
    /** Initial enabled state (default: false) */
    enabled?: boolean;
    /** Callback fired when conversion occurs */
    onConvert?: (original: string, converted: string) => void;
    /** Conversion options */
    options?: ConversionOptions;
    /** Initial input value (default: '') */
    initialValue?: string;
    /** Experimental mobile support (default: false) */
    mobileSupport?: boolean;
}

​
Return Value

The hook returns an object with the following properties:
  • inputProps: An object containing props to spread onto a <textarea> or <input>.
    • value: The current value (controlled).
    • onChange: Handler for text changes.
    • onKeyDown: Handler for key presses (Singlish logic).
    • onPaste: Handler for pasting.
  • value (string): The current text value.
  • setValue ((value: string) => void): Function to programmatically set the value.
  • enabled (boolean): Whether Singlish conversion is currently active.
  • toggle (() => void): Function to toggle Singlish on/off.
  • setEnabled ((enabled: boolean) => void): Function to set the enabled state explicitly.
  • convertAll (() => void): Function to convert the entire text content at once.
  • clear (() => void): Function to clear the input.
  • bufferDisplay (string): Current raw IME buffer (useful for debug UI).
  • focus (() => void): Focuses the bound textarea.
  • flushPending (() => string): Commits pending IME buffer.

​
Example

import { useSinglishConverter } from '@siyabasa/singlish';

export default function SinglishTextarea() {
  const { inputProps, enabled, toggle } = useSinglishConverter({
    enabled: true
  });

  return (
    <div>
      <div className="toolbar">
        <button onClick={toggle}>
          {enabled ? 'Singlish: ON' : 'Singlish: OFF'}
        </button>
      </div>
      <textarea
        {...inputProps}
        className="w-full h-32 p-2 border rounded"
        placeholder="Type in Singlish..."
      />
    </div>
  );
}