react-canvas

React Canvas is a JavaScript library from Flipboard that changes how React draws things on a web page. React is a popular tool for building user interfaces. Normally React renders into the DOM, the standard structure a browser uses to lay out a page. This library lets React components render into a canvas element instead, which is a single drawing area the browser can paint pixels onto directly.

The reason for doing this is speed on mobile. The team explains that web apps on phones often feel slow next to native apps, and they trace much of that to the DOM. Modern mobile browsers can draw to canvas with help from the device's graphics hardware, so rendering interface elements there can produce smoother scrolling and animation. The authors note that other canvas libraries for React focus on charts or games, while this one is aimed at building ordinary application interfaces. They treat the fact that it draws to canvas as a hidden implementation detail.

You install it through npm, the standard package manager for JavaScript. The library gives you a set of ready made building blocks that look like normal React components. Surface is the top level canvas area. Layer is the base element that others build on, carrying common style values like position, size, and background color. Group bundles child elements together and helps caching for fast scrolling. Text handles multi line text with truncation, Image can fade in once a picture has loaded, and Gradient fills a background with blended colors. ListView is a touch scrolling list, compared in the README to the fast list views on iOS and Android.

Events work much like they do in regular React, though not every event type is supported yet. The README includes short code samples showing how to place an image above some text, and how to feed items into a scrolling ListView.

The authors describe the project as a work in progress whose API may change, while noting that much of the code already runs in production on flipboard.com.