Need help with react-tiny-dom?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jiayihu
432 Stars 26 Forks 22 Commits 1 Opened issues

Description

🍙 A minimal implementation of react-dom using react-reconciler

Services available

!
?

Need anything else?

Contributors list

# 35,187
Redux
TypeScr...
nodejs-...
node
16 commits
# 517
React
TypeScr...
React N...
Less
1 commit
# 456,706
React
JavaScr...
HTML
fiber
1 commit

react-tiny-dom

react-tiny-dom
is a minimal implementation of react-dom as custom renderer using React 16 official Renderer API.

The purpose of this project is to show the meaning of each method of the

ReconcilerConfig
passed to react-reconciler, by using a practical yet familiar environment: the browser DOM.

react-tiny-dom

What's supported

  • Nested React components
  • setState
    updates
  • Text nodes
  • HTML Attributes
  • Event listeners
  • className
    prop
  • style
    prop

What's not supported yet, but I plan to

The following features of

react-dom
are not supported yet but I'll probably add them:
  • Web Components

Any 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.

Installation

npm install
npm start # Runs the example using react-tiny-dom

FAQ

How can I customize the methods logs in the console?

By 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
.
const TinyDOMRenderer = Reconciler(
  debugMethods(hostConfig, ['now', 'getChildHostContext', 'shouldSetTextContent'])
);

Obviously passing

hostConfig
directly to
Reconciler
will completely disable any method log.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.