Join us on the demo, while our product experts provide a detailed walkthrough of our enterprise platform.

logoAsync

The latest news in the world of engineering.

Identity and Access Management (IAM), including security and customer experience.

Visit Blog
Fuel

Grow your business to millions.Engage and retain your customers.

Visit Blog

React renderers, react everywhere?

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

Abhimanyu Singh Rathore
Abhimanyu Singh Rathore
June 23, 2021
3 min read

Free, Secure and Trusted Way to Authenticate Your Visitors

Add login to your website in 5 minutes completely for free!

Free Sign UpNo hidden costs. No credit card needed.

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

React-Figma

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>
                <View style={{ width: 200, height: 100, backgroundColor: '#dd423a' }} />                <Text style={{ color: 'white' }}>Hi, There</Text>
            </View>
        </Page>
    );
};

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

Ink

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} 
	</Color>;
}

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.

react-three-fiber

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 (
    <Ref
      {...props}
      ref={Ref}
      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'} />
    </Ref>
  )
}

ReactDOM.render(
  <Canvas>
    <pointLight position={[10, 10, 10]} />
    <MyFrame position={[-3.2, 0, 0]} />
    <MyFrame position={[2.2, 0, 0]} />
  </Canvas>,
  document.getElementById('root')
)

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

react-nil

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.

react-docx

Another reconciler for DOCX.js.

Let's understand with a sample code:

renderAsyncDocument(
  <section>
    <paragraph heading={Docx.HeadingLevel.HEADING_1}>
      This is a sample paragraph with paragraph tag
    </paragraph>
    <p>      This is a sample paragraph with P tag</p>
    <p>
      <t>this is for textrun</t>
    </p>
    <p>
      <img
        src="base64...."
        width={200}
        height={200}
      />
      <href
        src="http://localhost:8080"
        label={"image n links label"}
      />
    </p>
    <Component text="can try componets in this way of course, like react!">
    </Component>
  </section>
).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.



LoginRadius Docs

Implement Authentication in Minutes

click here

Most Popular Tags

EngineeringJavaScriptReactAuthenticationNodeJsCSSSecurityC#JWTOAuth

Do you want a free authentication solution?

Add the world's most secure, reliable and easy to implement user authentication solution on your applications at $0Get Started Free

Abhimanyu Singh Rathore

Abhimanyu Singh Rathore

A Fun loving, Technocrat, Artist, Photographer, Nature Lover, Bold, Leisure traveller, Sightseer, Developer, A Surprise Package to Explore!

View Profile

Try a Modern Authentication Solution

$0/ month

Free Sign Up
  • 7,000 Monthly Active Users
  • 1 Web or Mobile App
  • Email/Password Login
  • 3 Social Login Providers
  • User Data Storage
  • Transactional Email Template
  • Customizable Login Interfaces