{"id":30196370,"url":"https://github.com/georgelopez7/react-bionic-reading","last_synced_at":"2026-01-20T17:32:16.271Z","repository":{"id":305345095,"uuid":"1021047591","full_name":"georgelopez7/react-bionic-reading","owner":"georgelopez7","description":"𝗔 𝗥𝗲𝗮ct 𝗰𝗼𝗺𝗽onent 𝗹𝗶𝗯𝗿ary 𝗳𝗼r 𝗮𝗽𝗽𝗹ying 𝗯𝗶𝗼nic 𝗿𝗲𝗮𝗱ing 𝘁𝗼 𝘁𝗲xt. 𝗘𝗳𝗳𝗼𝗿𝘁𝗹essly 𝗶𝗻𝘁𝗲𝗴rate 𝗯𝗶𝗼nic 𝗿𝗲𝗮𝗱ing 𝗶𝗻𝘁𝗼 𝘆𝗼ur 𝗥𝗲𝗮ct 𝗮𝗽𝗽𝗹𝗶𝗰𝗮tions 𝘁𝗼 𝗲𝗻𝗵𝗮nce 𝗿𝗲𝗮𝗱𝗮𝗯ility 𝗮𝗻𝗱 𝗿𝗲𝗮𝗱ing 𝘀𝗽𝗲ed.","archived":false,"fork":false,"pushed_at":"2025-08-04T17:57:27.000Z","size":350,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-04T21:01:28.179Z","etag":null,"topics":["accessibility","bionic-reading","npm","react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-bionic-reading","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/georgelopez7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2025-07-16T19:48:31.000Z","updated_at":"2025-08-04T17:57:31.000Z","dependencies_parsed_at":"2025-07-19T18:28:49.814Z","dependency_job_id":"66eaf87a-6bcd-45a3-8a10-00441fe9dafc","html_url":"https://github.com/georgelopez7/react-bionic-reading","commit_stats":null,"previous_names":["georgelopez7/react-bionic-reading"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/georgelopez7/react-bionic-reading","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georgelopez7%2Freact-bionic-reading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georgelopez7%2Freact-bionic-reading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georgelopez7%2Freact-bionic-reading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georgelopez7%2Freact-bionic-reading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/georgelopez7","download_url":"https://codeload.github.com/georgelopez7/react-bionic-reading/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/georgelopez7%2Freact-bionic-reading/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270183606,"owners_count":24541341,"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","status":"online","status_checked_at":"2025-08-13T02:00:09.904Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["accessibility","bionic-reading","npm","react"],"created_at":"2025-08-13T05:18:20.867Z","updated_at":"2026-01-20T17:32:16.255Z","avatar_url":"https://github.com/georgelopez7.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚪⚫ 𝗥𝗲𝗮ct 𝗕𝗶𝗼nic 𝗥𝗲𝗮ding\n\n𝗔 𝗥𝗲𝗮ct 𝗰𝗼𝗺𝗽onent 𝗹𝗶𝗯𝗿ary 𝗳𝗼r 𝗮𝗽𝗽𝗹ying 𝗯𝗶𝗼nic 𝗿𝗲𝗮𝗱ing 𝘁𝗼 𝘁𝗲xt. 𝗘𝗳𝗳𝗼𝗿𝘁𝗹essly 𝗶𝗻𝘁𝗲𝗴rate 𝗯𝗶𝗼nic 𝗿𝗲𝗮𝗱ing 𝗶𝗻𝘁𝗼 𝘆𝗼ur 𝗥𝗲𝗮ct 𝗮𝗽𝗽𝗹𝗶𝗰𝗮tions 𝘁𝗼 𝗲𝗻𝗵𝗮nce 𝗿𝗲𝗮𝗱𝗮𝗯ility 𝗮𝗻𝗱 𝗿𝗲𝗮𝗱ing 𝘀𝗽𝗲ed.\n\n## 📷 𝗗𝗲mo\n\nhttps://github.com/user-attachments/assets/abd491c3-762e-44a1-ad49-ec80970f522f\n\n## 🚀 𝗜𝗻𝘀𝘁𝗮𝗹lation\n\n𝗜𝗻𝘀𝘁𝗮𝗹l 𝘁𝗵𝗲 𝗽𝗮𝗰𝗸age 𝗶𝗻 𝘆𝗼ur 𝗽𝗿𝗼ject 𝗱𝗶𝗿𝗲𝗰tory 𝘄𝗶th:\n\n```bash\nnpm install react-bionic-reading\n```\n\n𝗼𝗿 𝗶𝗳 𝘆𝗼u 𝗽𝗿𝗲𝗳er 𝘆𝗮rn:\n\n```bash\nyarn add react-bionic-reading\n```\n\n## ✨ 𝗨𝘀𝗮ge\n\n𝗪𝗲 𝗽𝗿𝗼𝘃ide 𝘁𝘄𝗼 𝗺𝗮in 𝗰𝗼𝗺𝗽𝗼nents 𝘁𝗼 𝗮𝗽𝗽ly 𝗯𝗶𝗼nic 𝗿𝗲𝗮𝗱ing: `BionicText` 𝗳𝗼𝗿 𝘀𝗶𝗻𝗴le 𝘀𝘁𝗿𝗶𝗻𝗴s 𝗮𝗻𝗱 `BionicBlock` 𝗳𝗼𝗿 𝗹𝗮𝗿𝗴er 𝗯𝗹𝗼𝗰ks 𝗼𝗳 𝗰𝗼𝗻𝘁ent 𝘄𝗶𝘁h 𝗻𝗲𝘀𝘁ed 𝗲𝗹𝗲𝗺ents.\n\n### `BionicText`\n\n𝗨𝘀𝗲 𝘁𝗵𝗲 `BionicText` 𝗰𝗼𝗺𝗽𝗼nent 𝘁𝗼 𝗮𝗽𝗽ly 𝗯𝗶𝗼nic 𝗿𝗲𝗮𝗱ing 𝘁𝗼 𝗮 𝘀𝘁𝗿𝗶ng.\n\n```jsx\nimport { BionicText } from \"react-bionic-reading\";\n\nfunction MyComponent() {\n  return (\n    \u003cBionicText text=\"This is some text that will be displayed with bionic reading.\" /\u003e\n  );\n}\n```\n\n### `BionicBlock`\n\n𝗨𝘀𝗲 𝘁𝗵𝗲 `BionicBlock` 𝗰𝗼𝗺𝗽𝗼nent 𝘁𝗼 𝗮𝗽𝗽ly 𝗯𝗶𝗼nic 𝗿𝗲𝗮𝗱ing 𝘁𝗼 𝗮 𝗯𝗹𝗼ck 𝗼𝗳 𝗰𝗼𝗻𝘁ent, 𝗶𝗻𝗰𝗹𝘂ding 𝗻𝗲𝘀𝘁ed 𝗛𝗧𝗠L 𝗲𝗹𝗲𝗺ents.\n\n```jsx\nimport { BionicBlock } from \"react-bionic-reading\";\n\nfunction MyArticle() {\n  return (\n    \u003cBionicBlock\u003e\n      \u003ch2\u003eThis is a heading\u003c/h2\u003e\n      \u003cp\u003e\n        This is a paragraph inside a bionic block. It will be converted to\n        bionic text.\n      \u003c/p\u003e\n    \u003c/BionicBlock\u003e\n  );\n}\n```\n\n### `useBionic` Hook\n\n𝗪𝗲 𝗲𝘅𝗽𝗼se 𝗮 `useBionic` 𝗵𝗼𝗼k 𝘁𝗵𝗮t 𝗮𝗹𝗹𝗼ws 𝘆𝗼u 𝘁𝗼 𝗴𝗹𝗼𝗯ally 𝗰𝗼𝗻𝘁rol 𝘁𝗵𝗲 𝗯𝗶𝗼nic 𝗿𝗲𝗮𝗱ing 𝘀𝘁𝗮te. 𝗧𝗵𝗶s 𝗶𝘀 𝘂𝘀𝗲𝗳ul 𝗳𝗼𝗿 𝗰𝗿𝗲𝗮ting 𝗮 𝘁𝗼𝗴𝗴le 𝗯𝘂𝘁𝘁on 𝘁𝗼 𝗲𝗻𝗮𝗯le 𝗼𝗿 𝗱𝗶𝘀𝗮ble 𝗯𝗶𝗼nic 𝗿𝗲𝗮𝗱ing 𝗳𝗼𝗿 𝘁𝗵𝗲 𝗲𝗻𝘁𝗶re 𝗮𝗽𝗽𝗹𝗶𝗰𝗮tion.\n\n```jsx\nimport { useBionic } from \"react-bionic-reading\";\n\nfunction BionicModeToggle() {\n  const { bionicMode, setBionicMode } = useBionic();\n\n  return (\n    \u003cbutton onClick={() =\u003e setBionicMode(!bionicMode)}\u003e\n      {bionicMode ? \"Disable\" : \"Enable\"} Bionic Reading\n    \u003c/button\u003e\n  );\n}\n```\n\n## 🧵 𝗣𝗿𝗼ps\n\n### `BionicText` Props\n\n| Prop              | Type            | Description                                                                                                              |\n| ----------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------ |\n| `text`            | `string`        | 𝗧𝗵𝗲 𝘁𝗲xt 𝘀𝘁𝗿𝗶ng 𝘁𝗼 𝗮𝗽𝗽ly 𝗯𝗶𝗼nic 𝗿𝗲𝗮𝗱ing 𝘁𝗼.                                                                              |\n| `as`              | `ElementType`   | 𝗧𝗵𝗲 𝗛𝗧𝗠L 𝗲𝗹𝗲𝗺ent 𝘁𝗼 𝗿𝗲𝗻𝗱er 𝘁𝗵𝗲 𝗰𝗼𝗺𝗽𝗼nent 𝗮𝘀. 𝗗𝗲𝗳𝗮ults 𝘁𝗼 `span`.                                                         |\n| `style`           | `CSSProperties` | 𝗜𝗻𝗹𝗶ne 𝘀𝘁𝘆𝗹es 𝘁𝗼 𝗮𝗽𝗽ly 𝘁𝗼 𝘁𝗵𝗲 𝗰𝗼𝗺𝗽𝗼nent.                                                                                 |\n| `className`       | `string`        | 𝗖𝗦𝗦 𝗰𝗹𝗮𝘀ses 𝘁𝗼 𝗮𝗽𝗽ly 𝘁𝗼 𝘁𝗵𝗲 𝗰𝗼𝗺𝗽𝗼nent.                                                                                   |\n| `forceBionicMode` | `boolean`       | 𝗜𝗳 `true`, 𝗯𝗶𝗼nic 𝗿𝗲𝗮𝗱ing 𝘄𝗶𝗹l 𝗯𝗲 𝗮𝗽𝗽𝗹ied 𝗿𝗲𝗴𝗮𝗿dless 𝗼𝗳 𝘁𝗵𝗲 𝗴𝗹𝗼𝗯al 𝘀𝘁𝗮te 𝗳𝗿𝗼m 𝘁𝗵𝗲 `useBionic` 𝗵𝗼𝗼k. 𝗗𝗲𝗳𝗮ults 𝘁𝗼 `false`. |\n\n### `BionicBlock` Props\n\n| Prop              | Type        | Description                                                                                                                               |\n| ----------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| `children`        | `ReactNode` | 𝗧𝗵𝗲 𝗰𝗼𝗻𝘁ent 𝘁𝗼 𝗯𝗲 𝗿𝗲𝗻𝗱ered 𝘄𝗶𝘁𝗵in 𝘁𝗵𝗲 𝗯𝗹𝗼ck. 𝗧𝗵𝗲 𝗰𝗼𝗺𝗽𝗼nent 𝘄𝗶𝗹l 𝗿𝗲𝗰𝘂𝗿sively 𝘁𝗿𝗮𝘃erse 𝘁𝗵𝗲 𝗰𝗵𝗶𝗹dren 𝗮𝗻𝗱 𝗮𝗽𝗽ly 𝗯𝗶𝗼nic 𝗿𝗲𝗮𝗱ing 𝘁𝗼 𝘁𝗲xt 𝗻𝗼𝗱es. |\n| `forceBionicMode` | `boolean`   | 𝗜𝗳 `true`, 𝗯𝗶𝗼nic 𝗿𝗲𝗮𝗱ing 𝘄𝗶𝗹l 𝗯𝗲 𝗮𝗽𝗽𝗹ied 𝗿𝗲𝗴𝗮𝗿dless 𝗼𝗳 𝘁𝗵𝗲 𝗴𝗹𝗼𝗯al 𝘀𝘁𝗮te 𝗳𝗿𝗼m 𝘁𝗵𝗲 `useBionic` 𝗵𝗼𝗼k. 𝗗𝗲𝗳𝗮ults 𝘁𝗼 `false`.                  |\n\n### `useBionic` Hook\n\n𝗧𝗵𝗲 `useBionic` 𝗵𝗼𝗼k 𝗿𝗲𝘁𝘂𝗿ns 𝗮n 𝗼𝗯𝗷𝗲ct 𝘄𝗶𝘁h 𝘁𝗵𝗲 𝗳𝗼𝗹𝗹𝗼wing 𝗽𝗿𝗼𝗽𝗲rties:\n\n| Property        | Type                 | Description                                             |\n| --------------- | -------------------- | ------------------------------------------------------- |\n| `bionicMode`    | `boolean`            | 𝗧𝗵𝗲 𝗰𝘂𝗿𝗿ent 𝘀𝘁𝗮te 𝗼𝗳 𝗯𝗶𝗼nic 𝗿𝗲𝗮𝗱ing (𝗲𝗻𝗮𝗯led/𝗱𝗶𝘀𝗮bled). |\n| `setBionicMode` | `(isBionic) =\u003e void` | 𝗔 𝗳𝘂𝗻𝗰tion 𝘁𝗼 𝘂𝗽𝗱𝗮te 𝘁𝗵𝗲 `bionicMode` 𝘀𝘁𝗮te.            |\n\n## 📄 License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeorgelopez7%2Freact-bionic-reading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeorgelopez7%2Freact-bionic-reading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeorgelopez7%2Freact-bionic-reading/lists"}