{"id":13630664,"url":"https://github.com/jiayihu/react-tiny-dom","last_synced_at":"2025-04-05T16:08:05.264Z","repository":{"id":40625799,"uuid":"112497273","full_name":"jiayihu/react-tiny-dom","owner":"jiayihu","description":"🍙 A minimal implementation of react-dom using react-reconciler ","archived":false,"fork":false,"pushed_at":"2022-12-07T09:56:31.000Z","size":553,"stargazers_count":465,"open_issues_count":5,"forks_count":31,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-29T15:06:36.992Z","etag":null,"topics":["custom-renderer","fiber","react","react-dom","reconciler","renderer"],"latest_commit_sha":null,"homepage":"https://jiayihu.github.io/react-tiny-dom/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jiayihu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-29T16:09:05.000Z","updated_at":"2025-01-11T05:20:39.000Z","dependencies_parsed_at":"2023-01-24T16:31:46.259Z","dependency_job_id":null,"html_url":"https://github.com/jiayihu/react-tiny-dom","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiayihu%2Freact-tiny-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiayihu%2Freact-tiny-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiayihu%2Freact-tiny-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiayihu%2Freact-tiny-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jiayihu","download_url":"https://codeload.github.com/jiayihu/react-tiny-dom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247361689,"owners_count":20926643,"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":["custom-renderer","fiber","react","react-dom","reconciler","renderer"],"created_at":"2024-08-01T22:01:53.355Z","updated_at":"2025-04-05T16:08:05.242Z","avatar_url":"https://github.com/jiayihu.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Web (+ NW \u0026 Electron)"],"sub_categories":[],"readme":"# react-tiny-dom\n\n`react-tiny-dom` is a minimal implementation of [react-dom](https://reactjs.org/docs/react-dom.html) as custom renderer using React 16 official Renderer API.\n\nThe purpose of this project is to show the meaning of each method of the `ReconcilerConfig` passed to [react-reconciler](https://github.com/facebook/react/tree/master/packages/react-reconciler), by using a practical yet familiar environment: the browser DOM.\n\n![react-tiny-dom](screenshot.png)\n\n## What's supported\n\n- Nested React components\n- `setState` updates\n- Text nodes\n- HTML Attributes\n- Event listeners\n- `className` prop\n- `style` prop\n\n## What's not supported yet, but I plan to\n\nThe following features of `react-dom` are not supported yet but I'll probably add them:\n\n- Web Components\n\nAny other feature which doesn't help explaining the `Renderer API`, like `dangerouslySetInnerHTML`, won't be supported on purpose, to keep the source code minimal and focused on simplicity.\n\n## Installation\n\n```\nnpm install\nnpm start # Runs the example using react-tiny-dom\n```\n\n## FAQ\n\n### How can I customize the methods logs in the console?\n\nBy default the demo logs most method calls of the Renderer, but you can pass a list of method names to exclude in the second parameter of `debugMethods`, when passing the `ReconcilerConfig` to `Reconciler`.\n\n```js\nconst TinyDOMRenderer = Reconciler(\n  debugMethods(hostConfig, ['now', 'getChildHostContext', 'shouldSetTextContent'])\n);\n```\n\nObviously passing `hostConfig` directly to `Reconciler` will completely disable any method log.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjiayihu%2Freact-tiny-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjiayihu%2Freact-tiny-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjiayihu%2Freact-tiny-dom/lists"}