react-canvas - High performance <canvas> rendering for React components

  •        84

React Canvas adds the ability for React components to render to rather than DOM. This project is a work-in-progress. Though much of the code is in production on flipboard.com, the React canvas bindings are relatively new and the API is subject to change.

https://github.com/Flipboard/react-canvas

Dependencies:

fbjs : ^0.8.8
linebreak : ^0.3.0
scroller : git://github.com/mjohnston/scroller

Tags
Implementation
License
Platform

   




Related Projects

react-ape - 🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

  •    Javascript

React 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-native-off-canvas-menu - Beautifully crafted off canvas menu components for react native applications

  •    Javascript

Beautifully crafted off canvas menu components for react native applications. Created with React Native Animated library. The component is compatible with Android only. There is an example app with this repository in the example folder.

react-pixi - Create/control a Pixi.js canvas using React

  •    Javascript

This library works with React 15. If you are using React 16, look at react-pixi-fiber or a different library also called react-pixi. Create/control a Pixi.js canvas using React.

react-konva - React + Canvas = Love

  •    Javascript

React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the Konva Framework.

react-three - React bindings to create and control a 3D scene using three.js

  •    Javascript

Create/control a three.js canvas using React. To use React for drawing 2D using WebGL, try react-pixi.


react-art - React Bridge to the ART Drawing Library

  •    Javascript

React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).

react-three-renderer - Render into a three.js canvas using React.

  •    Javascript

Render into a three.js canvas using React. Would you like to know more? See the wiki or go straight to the API documentation.

react-avatar-editor - Avatar & profile picture component editor

  •    Javascript

Facebook like, avatar / profile picture component. Resize, crop and rotate your uploaded image using a clear user interface. The resulting image will have the same resolution as the original image, regardless of the editor's size. If you want the image sized in the dimensions of the canvas you can use getImageScaledToCanvas.

react-native-sketch - 🎨 A React Native <Sketch /> component for touch-based drawing.

  •    Objective-C

A React Native component for touch-based drawing. The project contains a folder examples that contains few demos of how to use react-native-sketch. Just copy and paste the code to your React Native application.

react-native-sketch-canvas - A React Native component for drawing by touching on both iOS and Android

  •    Javascript

A React Native component for drawing by touching on both iOS and Android. To use an image as background, localSourceImage(see below) reqires an object, which consists of filename, directory(optional) and mode(optional). Note: Because native module cannot read the file in JS bundle, file path cannot be relative to JS side. For example, '../assets/image/image.png' will fail to load image.

react-chartjs - common react charting components using chart.js

  •    Javascript

You must also include chart.js and React as dependencies.The canvas element can be retrieved using getCanvas and the chartjs object can be retrieved using getChart.

react-particle-effect-button - Bursting particle effect buttons for React 🎉

  •    Javascript

Bursting particle effect buttons for React. This library is a React port of an awesome Codrops Article by Luis Manuel (original source).

f2 - 📱📈An elegant, interactive and flexible charting library for mobile.

  •    Javascript

F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex and React Native. Based on the grammar of graphics, F2 provides all the chart types you'll need. Our mobile design guidelines enable better user experience in mobile visualzation projects. Special thanks to Leland Wilkinson, the author of The Grammar Of Graphics, whose book served as the foundation for F2 and G2.

G3D - A pure 3D render engine compatible with webgl, running both in browser and gcanvas.

  •    Javascript

G3D is a javascript 3D engine based on WebGL. Compared with other WebGL 3D engines, G3D is a pure render engine, which means it depends on no DOM APIs but just a canvas(or canvas-like) object. This feature makes it possible that G3D works not only in browser but also in some hybrid environments like GCanvas (Weex or ReactNative). See website for more information.

jQuery layout background canvas plugin: gradients, rounded corners without CSS

  •    JQuery

jQuery layout and background canvas plugins allow web designers to draw with the canvas API in the background of a div or whatever block style element. The full canvas API power gives the flexibility to draw gradients, rounded corners without CSS trickery.

node-canvas - Node canvas is a Cairo backed Canvas implementation for NodeJS.

  •    C++

Alpha versions of 2.0 can be installed using npm install canvas@next.node-canvas is a Cairo backed Canvas implementation for NodeJS.