tiny-react-renderer - Learn you a React Renderer for Great Good

  •        10

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



babel-register : ^6.23.0
fbjs : ^0.8.4
react : 15.3.x



Related Projects

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

  •    Javascript

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-ionize - A React renderer for building your entire Electron app

  •    Javascript

react-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-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-sketchapp - render React components to Sketch ⚛️💎

  •    Javascript

This project is currently in beta and APIs are subject to change.First, make sure you have installed Sketch version 43+, & a recent npm.

react-blessed - A react renderer for blessed.

  •    Javascript

A React custom renderer for the blessed library. This renderer should currently be considered as experimental, is subject to change and will only work with React's latest version (16.x.x, using Fiber).

react-hardware - A React renderer for Hardware.

  •    Javascript

React Hardware enables you to build firmata-based hardware applications using a consistent developer experience based on JavaScript and React. The focus of React Hardware is on developer efficiency across all the platforms you care about - learn once, write anywhere. React Hardware is a IoT and Robotics programming framework developed by Dustan Kasten. Being based on firmata, it is capable of providing feature parity with alternative tools such as Johnny-Five.

react-blessed-hot-motion - A console app demo using React for rendering, animation, and hot reloading

  •    Javascript

This is a demo of a custom React Blessed console renderer (warning: very early preview, many things don’t work) using React Motion for animation, and Webpack for listening to code hot updates. It is based on @jlongster’s amazing Backend with Webpack example that shows how to integrate hot reloading into a Node (server) app.

react-automata - A state machine abstraction for React

  •    Javascript

A state machine abstraction for React that provides declarative state management and automatic test generation. react and react-test-renderer are peer dependencies.

rapscallion - Asynchronous React VirtualDOM renderer for SSR.

  •    Javascript

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

rendora - dynamic server-side rendering using headless Chrome to effortlessly solve the SEO problem for modern javascript websites

  •    Go

Rendora can be seen as a reverse HTTP proxy server sitting between your backend server (e.g. Node.js/Express.js, Python/Django, etc...) and potentially your frontend proxy server (e.g. nginx, traefik, apache, etc...) or even directly to the outside world that does actually nothing but transporting requests and responses as they are except when it detects whitelisted requests according to the config. In that case, Rendora instructs a headless Chrome instance to request and render the corresponding page and then return the server-side rendered page back to the client (i.e. the frontend proxy server or the outside world). This simple functionality makes Rendora a powerful dynamic renderer without actually changing anything in both frontend and backend code. Dynamic rendering means that the server provides server-side rendered HTML to web crawlers such as GoogleBot and BingBot and at the same time provides the typical initial HTML to normal users in order to be rendered at the client side. Dynamic rendering is meant to improve SEO for websites written in modern javascript frameworks like React, Vue, Angular, etc...

react-hint - Tooltip component for React, Preact, Inferno

  •    Javascript

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

awesome-react-renderer - Awesome list of React Renderer


If you want to contribute to this list (please do), send me a pull request. To the extent possible under law, Chen-Tsu Lin has waived all copyright and related or neighboring rights to this work.

react-native-htmlview - A React Native component which renders HTML content as native views

  •    Javascript

A component which takes HTML content and renders it as native views, with customisable style and handling of links, etc. If you're getting the error "undefined is not an object (evaluating 'RCTLinkingManager.openURL’)” from the LinkingIOS API, try adding ‘RCTLinking' to the project's 'Linked Frameworks and Libraries’. You might have to find RCTLinking.xcodeproj in the react-native package dir and drag that into your main Xcode project first.

universal-redux - An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering

  •    Javascript

Universal Redux is an npm package that when used as a dependency in your project provides a universal (isomorphic) rendering server. You can either use its defaults and begin coding your project, or configure it to your liking with custom Webpack options and Express or Redux middleware. It's intended as both an easy starting point for developers new to React and Redux, as well as an extensible base by which advanced developers can augment with their own middleware and keep up to date with the fast-moving React ecosystem. The quickest way to get started is to clone the starter project. This gives you a base project that is set up with default configurations of Webpack and Express.

react-snapshot - A zero-configuration static pre-renderer for React apps

  •    Javascript

Server-side rendering is a big feature of React, but for most apps it can be more trouble than its worth. Personally, I think the sweet spot is taking static site snapshots of all your publicly-accessible pages & leaving anything requiring authentication as a normal, JS-driven Single Page App. This is a project to do that. Automatically, without any configuration, just smart defaults. Retrospective progressive enhancement.

react-native-masonry - :raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions

  •    Javascript

"Bricks" are the basic building block of the masonry and are passed into the props.bricks. They essentially represent the items within each column and require a uri property at a minimum. However, you can freely add additional properties to the data property if you need access to certain data within your brick.onPress handler and footer/header renderer. The following properties are available.

static-react - Zero-configuration CLI React static renderer

  •    Javascript

Use the getInitialProps static method to fetch data or get server-side props for things like CSS-in-JS libraries. Use the getInitialProps to pass side effects from CSS-in-JS libraries as props.