{"id":19676114,"url":"https://github.com/dchan3/react-bpmf","last_synced_at":"2025-10-23T17:27:24.585Z","repository":{"id":91876972,"uuid":"157040042","full_name":"dchan3/react-bpmf","owner":"dchan3","description":"React library for displaying Zhuyin Fuhao alongside Chinese characters","archived":false,"fork":false,"pushed_at":"2019-01-08T00:14:33.000Z","size":944,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T22:06:35.844Z","etag":null,"topics":["bopomofo","chinese-characters","chinese-language","pronunciation","ruby-text","tone-marker","zhuyin","zhuyin-fuhao"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dchan3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-11T02:21:15.000Z","updated_at":"2019-01-11T07:31:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"88db12a1-a3d3-44c2-b837-384bf02742e8","html_url":"https://github.com/dchan3/react-bpmf","commit_stats":{"total_commits":42,"total_committers":1,"mean_commits":42.0,"dds":0.0,"last_synced_commit":"1f9e959cb973a878d603c1518f21f2e288bac8b8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dchan3%2Freact-bpmf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dchan3%2Freact-bpmf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dchan3%2Freact-bpmf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dchan3%2Freact-bpmf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dchan3","download_url":"https://codeload.github.com/dchan3/react-bpmf/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240700420,"owners_count":19843518,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bopomofo","chinese-characters","chinese-language","pronunciation","ruby-text","tone-marker","zhuyin","zhuyin-fuhao"],"created_at":"2024-11-11T17:27:14.483Z","updated_at":"2025-10-23T17:27:24.510Z","avatar_url":"https://github.com/dchan3.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-bpmf\n[![NPM version](https://img.shields.io/npm/v/react-bpmf.svg?style=flat)](https://www.npmjs.com/package/react-bpmf)\n![npm](https://img.shields.io/npm/dt/react-bpmf.svg)\n\n*React library for displaying Zhuyin Fuhao alongside Chinese characters*\n\n## Introduction\nThis package aims to render Zhuyin Fuhao, a ruby text system colloquially referred to as 'bopomofo') alongside Chinese characters as specified by the Taiwan Ministry of Education ([see more here](https://r12a.github.io/scripts/bopomofo/ontheweb)) by means of the React framework and parametric CSS, which can be accomplished thanks to [`styled-components`](https://github.com/styled-components/styled-components).\n\n## Installation\n`npm i react-bpmf`\n\n## Components\n### `BpmfText`\n`props`:\n-   `vertical`: Boolean. Controls the orientation of the ruby text. If true, renders ruby text vertically, renders horizontally otherwise.\n-   `fontSize`: String. An acceptable CSS font size value that controls the font size of the rendered text.\n-   `string`: String. The text whose pronunciation is to be notated by the ruby text. Can be more than one alphanumeric or CJK character.\n-   `pronunciation`: String. The content of the ruby text excluding the tone marker.\n-   `tone`: String. Tone marker, if applicable.\n\n### `BpmfTextBlock`\n`props`:\n-   `container_vertical`: Boolean. Controls the orientation of the container.\n-   `text_vertical`: Boolean. Controls the orientation of the ruby text.\n-   `fontSize`: String. An acceptable CSS font size value that controls the font size of the rendered text.\n-   `text`: String. The text whose pronunciation is to be notated by the ruby text.\n-   `pronunciation`: String. Contains the pronunciation of the entire string.\n\n## Experimental Features\n### Automated Pronunciation Labeling using `BpmfAutoText` and `BpmfAutoTextUnit`\n`props`: Same as those of `BpmfTextBlock` and `BpmfText`, respectively, excluding `pronunciation` and `tone`, as the pronunciation string is automatically generated.\n\n## Changelog\n-  v0.1.0: Added `BpmfAutoTextUnit`\n-  v0.0.1: The Taiwan Ministry of Education specification has been implemented only for the vertical display of characters.  \n\n## Pull Requests and Constructive Criticism Welcome\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdchan3%2Freact-bpmf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdchan3%2Freact-bpmf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdchan3%2Freact-bpmf/lists"}