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:
1import * as React from 'react';
2import { Page, View, Text } from 'react-figma';
3export const App = () => {
4return (
5<Page name="My Resume" isCurrent>
6<View>
7<View style={{ width: 200, height: 100, backgroundColor: '#dd423a' }} /> <Text style={{ color: 'white' }}>Hi, There</Text>
8</View>
9</Page>
10);
11};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 :
1import React from 'react';
2import ReactHardware, {Led} from 'react-hardware';
3const App = () => {
4const [ledStage, setLedStage] = useState(false);
5useEffect(() => {
6setInterval(() => {
7setLedStage(prev => !prev);
8}, 2000);
9}, []);
10return <Led pin={13} value={ledStage ? 255 : 0} />
11}
12const PORT = 'dev/tty.usbmodem1411';
13ReactHardware.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:
1const Raiser = () => {
2 const [i, setI] = useState(0);
3useEffect(() => {
4setInterval(() => {
5setI(prev => prev + 1);
6}, 200);
7}, []);
8return <Color>
9Increased by {i}
10</Color>;
11}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:
1import ReactDOM from 'react-dom'
2import React, { useRef, useState } from 'react'
3import { Canvas, useFrame } from 'react-three-fiber'
4function MyFrame(props) {
5const Ref = useRef()
6const [hover, setOnHover] = useState(false)
7const [enable, setEnable] = useState(false)
8useFrame(() => (Ref.current.rotation.x = Ref.current.rotation.y += 0.01))
9return (
10<Ref
11{...props}
12ref={Ref}
13scale={enable ? [1.5, 1.5, 1.5] : [1, 1, 1]}
14onClick={(e) => setEnable(!enable)}
15onPointerOver={(e) => setOnHover(true)}
16onPointerOut={(e) => setOnHover(false)}>
17<boxBufferGeometry args={[1, 1, 1]} />
18<meshStandardMaterial color={hover ? 'hotpink' : 'orange'} />
19</Ref>
20)
21}
22ReactDOM.render(
23<Canvas>
24<pointLight position={[10, 10, 10]} />
25<MyFrame position={[-3.2, 0, 0]} />
26<MyFrame position={[2.2, 0, 0]} />
27</Canvas>,
28document.getElementById('root')
29)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.
1import React, { useState, useEffect } from "react"
2import { render } from "react-nil"
3function MyComponent() {
4 const [active, set] = useState(false)
5 useEffect(() => void setInterval(() => set((active) => !active), 1000), [])
6 return null
7}
8render(<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:
1renderAsyncDocument(
2 <section>
3 <paragraph heading={Docx.HeadingLevel.HEADING_1}>
4 This is a sample paragraph with paragraph tag
5 </paragraph>
6 <p> This is a sample paragraph with P tag</p>
7 <p>
8 <t>this is for textrun</t>
9 </p>
10 <p>
11 <img
12 src="base64...."
13 width={200}
14 height={200}
15 />
16 <href
17 src="http://localhost:8080"
18 label={"image n links label"}
19 />
20 </p>
21 <Component text="can try componets in this way of course, like react!">
22 </Component>
23 </section>
24).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.
