react-konva - React + Canvas = Love

  •        86

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

https://konvajs.github.io/docs/react/
https://github.com/konvajs/react-konva

Dependencies:

fbjs : ^0.8.17
react-reconciler : ^0.13.0

Tags
Implementation
License
Platform

   




Related Projects

konva - Konva

  •    Javascript

Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more. You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.

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.

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

ReactJS.NET - A .NET library for JSX compilation and server-side rendering of React components

  •    CSharp

ReactJS.NET is a library that makes it easier to use Babel along with Facebook's React and JSX from C#. Its features include On-the-fly JSX to JavaScript compilation, JSX to JavaScript compilation via popular minification / combination libraries, Server-side component rendering to make your initial render super-fast,

jsx-control-statements - Neater If and For for React JSX

  •    Javascript

JSX-Control-Statements is a Babel plugin that extends JSX to add basic control statements: conditionals and loops. It does so by transforming component-like control statements to their JavaScript counterparts - e.g. <If condition={condition()}>Hello World!</If> becomes condition() ? 'Hello World!' : null. Developers coming to React from using JavaScript templating libraries like Handlebars are often surprised that there's no built-in looping or conditional syntax. This is by design - JSX by is not a templating library, it's declarative syntactic sugar over functional JavaScript expressions. JSX Control Statements follows the same principle - it provides a component-like syntax that keeps your render functions neat and readable, but desugars into clean, readable JavaScript.


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-sparklines - Beautiful and expressive Sparklines React component

  •    Javascript

width, height - dimensions of the generated sparkline in the SVG viewbox. This will be automatically scaled (i.e. responsive) inside the parent container by default. svgWidth, svgHeight - If you want absolute dimensions instead of a responsive component set these attributes.

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-magic - Automatically AJAXify plain HTML with the power of React. It's magic!

  •    Javascript

React-Magic is an experimental library that uses the power of Facebook's React library to inject AJAX-loading goodness into plain old HTML webpages, without having to write any custom JavaScript. You can even use CSS transitions between the pages. Simply add a single script tag (or click a bookmarklet) and "it just works".HTMLtoJSX is a component of React-Magic that converts HTML to JSX. It can be used standalone, either on the web or via Node.js.

poi - :zap: Delightful web development.

  •    Javascript

Start writing an app with a single .js file, Poi could handle all the development setups for you, no more configuration hell.Note: You need to install react react-dom and run Poi with --jsx react flag. For convenience, here's also poi-preset-react which adds both React JSX and React HMR support.

nerv - A blazing fast React alternative, compatible with IE8 and React 16.

  •    Javascript

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

react-python - Python bridge to JSX & the React JavaScript library.

  •    Python

PyReact is a Python wrapper around the React JavaScript library and JSX. Specifically, it provides an API to transform JSX files into JavaScript from within your Python application, as well as providing access to the latest React build.

html-to-react-components - Converts HTML pages into React components

  •    Javascript

Extract annotated portions of HTML into React components as separate modules. The structure of HTML is preserved by importing child components and replacing appropriate pieces of HTML with them. As a result you get an entire components tree ready to be rendered. This utility was designed to free React developers from a boring task of translating HTML into components.

language-babel - ES2017, flow, React JSX and GraphQL grammar and transpilation for ATOM

  •    CoffeeScript

Language grammar for all versions of JavaScript including ES2016 and ESNext, JSX syntax as used by Facebook React, Atom's etch and others, as well as optional typed JavaScript using Facebook flow. This package also supports highlighting of GraphQL language constructs when inside certain JavaScript template strings. For .graphql and .gql file support please see language-graphql . The colour of syntax is determined by the theme in use. By default the language-babel package will detect file types .js,.babel,.jsx, .es, .es6, .mjs and .flow. Use the standard ATOM interface to enable it for other file types. This provides a grammar that scopes the file in order to colour the text in a meaningful way. If other JavaScript grammars are enabled these may take precedence over language-babel. Look at the bottom right status bar indicator to determine the language grammar of a file being edited. language-babel will be shown as either Babel or Babel ES6 JavaScript. Clicking the name will allow the grammar for a file to be changed.

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

  •    Javascript

React Canvas adds the ability for React components to render to <canvas> 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.

rough - Create graphics with a hand-drawn, sketchy, appearance

  •    Javascript

Rough.js is a light weight (~9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG.

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.