loginradiusloginradius Blog

React renderers, react everywhere?

There is an advanced feature of React is that it can write renderers for multiple different env.

There is an advanced feature of React that it can write renderers for multiple different env. Let discuss a few of them.


This is a Renderer for Figma. It can use React components as a design source.

Sample code with react-figma:

import * as React from 'react';
import { Page, View, Text } from 'react-figma';

export const App = () => {
    return (
        <Page name="My Resume" isCurrent>
                <View style={{ width: 200, height: 100, backgroundColor: '#dd423a' }} />                <Text style={{ color: 'white' }}>Hi, There</Text>

Nowadays, Figma is the most popular design tool, similar renderers available as well: react-sketchapp for Sketch, react-xd for Adobe XD.

React Hardware

A device like Arduino can be operated by React components.

Let's checkout demo code :

import React from 'react';
import ReactHardware, {Led} from 'react-hardware';

const App = () => {
  const [ledStage, setLedStage] = useState(false);

  useEffect(() => {
    setInterval(() => {
      setLedStage(prev => !prev);
    }, 2000);
  }, []);

  return <Led pin={13} value={ledStage ? 255 : 0} />
const PORT = 'dev/tty.usbmodem1411';
ReactHardware.render(<App />, PORT);


Another React solution for CLIs. It allows you to run, build and test your CLI output through components:

The code of the demo:

const Raiser = () => {
  const [i, setI] = useState(0);

  useEffect(() => {
    setInterval(() => {
      setI(prev => prev + 1);
    }, 200);
  }, []);

  return <Color>
    Increased by {i} 

Ink is a popular one that is used by libraries such a Gatsby, Parcel, Yarn 2, etc. react-blessed is one of the similar libraries.


This is a great React renderer for threejs on the react-native and web.

Let's see a sample code:

import ReactDOM from 'react-dom'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from 'react-three-fiber'

function MyFrame(props) {
  const Ref = useRef()
  const [hover, setOnHover] = useState(false)
  const [enable, setEnable] = useState(false)

  useFrame(() => (Ref.current.rotation.x = Ref.current.rotation.y += 0.01))

  return (
      scale={enable ? [1.5, 1.5, 1.5] : [1, 1, 1]}
      onClick={(e) => setEnable(!enable)}
      onPointerOver={(e) => setOnHover(true)}
      onPointerOut={(e) => setOnHover(false)}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hover ? 'hotpink' : 'orange'} />

    <pointLight position={[10, 10, 10]} />
    <MyFrame position={[-3.2, 0, 0]} />
    <MyFrame position={[2.2, 0, 0]} />

The library has a great ecosystem along with packages such as react-three-flex ,react-xr, react-postprocessing , etc.


A renderer for React that render nothing.

import React, { useState, useEffect } from "react"
import { render } from "react-nil"
function MyComponent() {
  const [active, set] = useState(false)
  useEffect(() => void setInterval(() => set((active) => !active), 1000), [])
  return null

render(<MyComponent />)

It provides you kind of high-level abstraction to Node.


Another reconciler for DOCX.js.

Let's understand with a sample code:

    <paragraph heading={Docx.HeadingLevel.HEADING_1}>
      This is a sample paragraph with paragraph tag
    <p>      This is a sample paragraph with P tag</p>
      <t>this is for textrun</t>
        label={"image n links label"}
    <Component text="can try componets in this way of course, like react!">
).then((doc) => console.log(doc));

Also, you can checkout react-pdf and redocx for a similar purpose.

Can visit this Github Repo for a curated list of react renderers.

Abhimanyu Singh Rathore

Written by Abhimanyu Singh Rathore

He is a fun-loving technocrat, artist, photographer, nature lover, leisure traveler, and developer. He actively develops full-stack apps and programs in Go and various JavaScript frameworks and libraries, especially React.

LoginRadius CIAM Platform

Our Product Experts will show you the power of the LoginRadius CIAM platform, discuss use-cases, and prove out ROI for your business.

Book A Demo Today