React Components for Traditional Chinese Localization

A React ruby typography component that annotates Chinese characters with Bopomofo (Zhuyin) or Hanyu Pinyin above them — switch between Bopomofo and Pinyin, highlight a character on hover, adjust the annotation size and spacing. Suited to teaching materials, dictionaries, and children's sites.

Numbers rolling between three forms — lowercase Chinese numerals, formal (financial) Chinese numerals, and Arabic digits — with automatic conversion to the formal amount form.

A React calendar component showing the Gregorian and lunar calendars side by side — every cell is annotated with the lunar day, the 24 solar terms, and traditional festivals, and one click switches the primary axis between lunar and Gregorian.

Two-level cascading selects for city/county and township/district, filling in the postal code automatically.

A React component that validates Taiwan's 8-digit business tax ID (Uniform Number) in real time — it implements the 2023 check-digit algorithm (weights 1,2,1,2,1,2,4,1, including the special case where the 7th digit is 7) and shows pass/fail with animated feedback as you type.

Mobile numbers starting with 09 are formatted automatically as 09xx-xxx-xxx, with landline and mobile detected automatically.

An input for Taiwan's common e-invoice carrier (the mobile barcode) — it validates the "leading / plus 7 characters" format and its character set, and draws the carrier number as a Code 39 barcode in real time for scanning.

The chat UI Taiwanese users know best — green and white bubbles, read receipts, stickers, and date dividers.

A Traditional / Simplified Chinese toggle that cross-fades the body text character by character.

A spring couplet layout with vertically written upper and lower scrolls plus a top banner — gold on red, revealed stroke by stroke.

A square or round seal component — relief and intaglio carving, a stamping press animation, and ink bleed.

An open-the-red-envelope interaction — an idle wiggle, a click to tear it open, a rolling amount, and a burst of gold coins.

An input for the Taiwan national ID number — check-digit validation, masked display by default, and district and gender badges.

A twelve-animal zodiac ring — rotate to select, and the chosen sign expands into a card of years and traits.

A side navigation bar in vertical Chinese writing — writing-mode vertical typesetting, with an ink line marking the current item.

A React date picker that toggles between the ROC (Minguo) calendar and the Gregorian one — a grid calendar with a "ROC (Minguo) 115 Month" (Minguo year) dropdown, typed input like "115/08/18" or "2026-08-18" parsed with an IME guard, and ISO output that also carries the ROC and Gregorian forms.

A React money input that mirrors Arabic digits into formal Chinese uppercase (新臺幣壹萬貳仟元整) as you type: thousands grouping, jiao/fen handling, one-click copy, and a standalone toChineseUpper() converter for checks, receipts, contracts and quotes.

A React search box that never fires queries or lets Enter mis-select while a Zhuyin/Pinyin IME is composing — queries wait until compositionend (normal typing is debounced), a composing-state chip, highlighted matches, a / hotkey to focus, and a copy-paste IME handling pattern for your own inputs.

A React component for Taiwan's uniform-invoice lottery: type the last 3 or all 8 digits of an invoice number and match it against the prize numbers you pass in — confetti, a rolling prize amount and a prize badge on a win, a gentle head-shake and a one-tap check-the-next-one button on a miss.

Throw two crescent divination blocks with a 3D tumbling animation; the landing resolves to sheng-bei / xiao-bei / yin-bei and fires onResult for playful yes/no decisions

A horizontal timeline of the 24 solar terms for React: locates the current term for any date, counts down to the next one, with seasonal colour bands and phenology / seasonal-food cards; term dates come from the standard 21st-century approximation, getSolarTerms and currentSolarTerm are exported, and almanac values can override the formula.

A React tile-grid map of Taiwan's 22 counties and cities that needs no geo data: value-driven choropleth colouring, hover tooltip cards, click callbacks and arrow-key navigation, usable as a visual filter.

Taiwan almanac day card: big Gregorian date with the lunar date, auspicious do/avoid lists, clash zodiac and lucky hours, with a tear-off page-flip animation between days

A Taiwan-convention stock quote card for React: red for up and green for down, limit-up/down locked styling, rolling flashing price digits, a change badge, open/high/low/previous-close cells, a volume bar and a compact 5-level order book — all data supplied via props.

A React textarea with CJK-aware counting: switch live between word, character and byte modes, a limit progress ring, near-limit and over-limit warnings, frozen counts while an IME is composing, and an optional hard limit.

Flips one sentence between languages with a split-flap or vertical roll, and can settle on a chosen locale — demoed in Traditional Chinese, English and Japanese.