moham96 / react-phonetic-transcription

Phonetic transcription tools with react js for input, outputing, etc

React Phonetic Transcription

Phonetic transcription tools with react js for input, outputing, etc.

Future update

Let me know what you want. You can write issue on my repo.

Example

import React,{useState} from "react";
import { InputPhonetic, TextToPhonetic } from "react-phonetic-transcription";

const [text,setText] = useState("");

<TextToPhonetic>
    {text}
</TextToPhonetic>

<InputPhonetic
  sx={{
    mt: 2,
  }}
  addValue={(newValue) => {
    setValue(text + newValue);
  }}
/>

API

function InputPhonetic({
    addValue, // for the output if you click the phonetic symbol
    useRemember = true, // Remembering your last phonetic symbol
    dataDefault = common_java,
    height = "300px", // the height of phonetic keyboard
    ...rest
})

function TextToPhonetic({ children, ...rest }) {
  return (
    <span className="fonetis" {...rest}>
      {children}
    </span>
  );
}