A React component that displays a transliteration popover for Thai text when the user hovers over it. It fetches transliteration data from an external API and displays it in a popover.
To install the component, run:
npm install react-thai-popoverImport the react-thai-popover component and use it within your React application:
import React from 'react';
import ThaiPopover from 'react-thai-popover';
function App() {
return (
<div>
<ThaiPopover bg="#e0f7fa">สวัสดี</ThaiPopover>
</div>
);
}
export default App;| Prop | Type | Default | Description |
|---|---|---|---|
children |
string | Required | The Thai text to be displayed. This text will be transliterated when hovered over. |
bg |
string | "transparent" |
Background color of the text container. Accepts any valid CSS color value. |
import React from 'react';
import ThaiPopover from 'react-thai-popover';
function App() {
return (
<div style={{ padding: '20px' }}>
<h1>Hover over the text below:</h1>
<ThaiPopover bg="#f9f9f9">
สวัสดี
</ThaiPopover>
</div>
);
}
export default App;react-thai-popover displays a transliteration of Thai text when hovered over. The component sends a request to an external API to fetch the transliteration of the provided text. While the data is being fetched, a spinner is displayed. If the request fails, an error message is shown instead.
- The
bgprop allows you to customize the background color of the text container. - The popover has a smooth transition when it appears and disappears, making the experience more interactive.
The component makes a POST request to https://getmatke.pythonanywhere.com/api/g2p to fetch transliteration data. The response is displayed in the popover under the label "Transliteration".
- Make sure to handle any API rate limits or potential downtime, as the component relies on an external service for transliteration.
- The popover adjusts its height dynamically based on the content, ensuring a smooth transition.
MIT