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.
https://jiayihu.github.io/react-tiny-dom/Tags | react-dom custom-renderer reconciler renderer fiber react |
Implementation | Javascript |
License | MIT |
Platform | OS-Independent |
This function returns a Renderer, an interface for rendering your VirtualDOM element. Methods are enumerated below.This function evaluates the React VirtualDOM Element originally provided to the renderer, and returns a Promise that resolves to the component's evaluated HTML string.
react server-side-rendering react-dom asynchronous stream html render ssrCreating a React Renderer will give you the opportunity to apply the same React knowledge that you and your team already know and enjoy from the web and native to whatever host environment you need. Creating a renderer is a fairly straight-forward affair once you know what you’re looking for.
react reactjs rendererReact Renderer to build UI interfaces using canvas/WebGL. React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainly a renderer focused on creating things for TV, PS4, Nintendo Switch, PS Vita, PS3 and low memory devices. If you're curious about the name: It's a "joke" with Netflix's React Gibbon renderer. I choose to use Ape then.
react react-renderer renderer render gl webgl webgl2 canvas canvas-html5This is a repository of resources for React Fiber. React Fiber is a new React reconciler algorithm, which is used from v16.
react react-fiberZero configuration Preact widgets renderer in any host DOM
preact portable vdom embed iframe react dom preact-in-dom virtual-dom widgetNerv is a virtual-dom based JavaScript (TypeScript) library with identical React 16 API, which offers much higher performance, tinier package size and better browser compatibility. π« Support React 16 features, Error Boundaries, Portals, custom DOM attributes, etc.
nerv react preact inferno jsx virutal-dom vdom reactjs framework frontend nervjs typescript react-likereact-tv: React Renderer for low memory applications. react-tv-cli: React Packager for TVs.
react tv rendering react-renderer react-tv webos samsung smarttv tvs lg-webos palm tizen-dev tizen-tv orsayreact-ionize is a library which lets you build the "non-browser" parts of an Electron app using React components to manage your application's state. Electron applications consist of two types of process: a main process which manages the lifecycle of the application, and several renderer processes, which display webpages which comprise the application's GUI. While it's fairly common to use React and ReactDOM to build an HTML/CSS/JS interface in the renderer process, react-ionize runs in the main process, managing things like window size/position, menu contents, and application-wide events.
react reactjs electron desktop app atom osxUtilise Shadow DOM in React with all the benefits of style encapsulation.
react reactjs shadow-dom webcomponents components style-encapsulation shadow-boundary css-document react-shadow-dom react-shadow-boundary react-template react-webcomponents react-web-components react-encapsulationPREACT is a fast 3kB alternative to React, with the same ES2015 API. It provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it's time we stopped reimplementing it in the name of safety. Preact is also a first-class citizen of the web platform. It diffs Virtual DOM against the DOM itself, registers real event handlers, and plays nicely with other libraries.
front-end-framework react-alternative javascript-framework ui-framework user-interface virtual-domReact-hint is a small tooltip component for React which is developed with simplicity and performance in mind. It also plays nicely with Preact and Inferno. You don't need to include ReactHint in every component which uses tooltips, just include it once in the topmost container component. In case you need to define multiple instances of ReactHint, you can customise the attribute name per instance. ReactHint also supports custom tooltip content with attached event handlers by overriding the content renderer and returning a react node.
react inferno preact tooltip react-component component hint react-hint react-tooltipDOM like data structure to be mutated by D3 et al, then rendered to React elements. ReactFauxDOM supports a wide range of DOM operations and will fool most libraries but it isn't exhaustive (the full DOM API is ludicrously large). It supports enough to work with D3 but will require you to fork and add to the project if you encounter something that's missing.
react d3 dom virtualA React Native renderer for Angular
angular renderer react-nativeNeed to make dropdowns, lightboxes/modals/dialogs, global message notifications, or tooltips in React? React Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component (react docs). This hook is also isomorphic, meaning it works with SSR (server side rendering).
react-hooks react react-portal portal loading-bar modal lightbox notification dialog dropdown tooltip hook use react-hook react-component react-useportal react-use-portal transportation react-portal-hookReact Armor is a collection of utilies to protect your React-powered DOM from third-party tampering. In a React app, it is often crucial to make sure that the actual DOM doesn't get changed behind your back, so that the virtual DOM and the actual DOM stay in sync, under your control, enforcing your invariants.
Elmish implements core abstractions that can be used to build applications following the “model view update” style of architecture, as made famous by Elm. The library however does not model any "view" and is intended for use in conjuction with a DOM/renderer, like React/ReactNative or VirtualDOM. Those familiar with Redux may find Elmish a more natural fit when targeting React or ReactNative as it allows one to stay completely in idiomatic F#.
fable elm redux mvcCheck out a small demo here and see the component in action highlighting the generated test code here. There are other syntax highlighters for React out there so why use this one? The biggest reason is that all the others rely on triggering calls in componentDidMount and componentDidUpdate to highlight the code block and then insert it in the render function using dangerouslySetInnerHTML or just manually altering the DOM with native javascript. This utilizes a syntax tree to dynamically build the virtual dom which allows for updating only the changing DOM instead of completely overwriting it on any change, and because of this it is also using more idiomatic React and allows the use of pure function components brought into React as of 0.14.
react syntax lowlight highlighting astStencil is a simple compiler for generating Web Components and progressive web apps (PWA). Stencil was built by the Ionic Framework team for its next generation of performant mobile and desktop Web Components. Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. It takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that runs on both modern browsers and legacy browsers back to Internet Explorer 11.
webcomponents pwa progressive-web-app custom-elements typescript stencil stenciljs ionic web-components components webappAvoid it if you can, but for a certain class of (mostly animation-related) problems, you need to query the DOM. This library provides a way to track DOM elements in a functional, declarative manner. It's important to note that AwesomeComponent must be stateful in this example. At the time of writing react-track does not support stateless functional components (SFCs) due to its reliance on the ref attribute, which such components do not provide. In order to track an SFC, wrap it in a TrackedDiv.
react animation dom-element react-component scroll scrolling
We have large collection of open source products. Follow the tags from
Tag Cloud >>
Open source products are scattered around the web. Please provide information
about the open source projects you own / you use.
Add Projects.