{"componentChunkName":"component---src-templates-tag-js","path":"/tags/renderer/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"fields":{"slug":"/engineering/react-renderer/"},"html":"

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

\n

React-Figma

\n

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

\n

Sample code with react-figma:

\n
import * as React from 'react';\nimport { Page, View, Text } from 'react-figma';\n\nexport const App = () => {\n    return (\n        <Page name="My Resume" isCurrent>\n            <View>\n                <View style={{ width: 200, height: 100, backgroundColor: '#dd423a' }} />                <Text style={{ color: 'white' }}>Hi, There</Text>\n            </View>\n        </Page>\n    );\n};
\n

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

\n

React Hardware

\n

A device like Arduino can be operated by React components.

\n

Let's checkout demo code :

\n
import React from 'react';\nimport ReactHardware, {Led} from 'react-hardware';\n\nconst App = () => {\n  const [ledStage, setLedStage] = useState(false);\n\n  useEffect(() => {\n    setInterval(() => {\n      setLedStage(prev => !prev);\n    }, 2000);\n  }, []);\n\n  return <Led pin={13} value={ledStage ? 255 : 0} />\n}\nconst PORT = 'dev/tty.usbmodem1411';\nReactHardware.render(<App />, PORT);
\n

Ink

\n

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

\n

The code of the demo:

\n
const Raiser = () => {\n  const [i, setI] = useState(0);\n\n  useEffect(() => {\n    setInterval(() => {\n      setI(prev => prev + 1);\n    }, 200);\n  }, []);\n\n  return <Color>\n    Increased by {i} \n\t</Color>;\n}
\n

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

\n

react-three-fiber

\n

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

\n

Let's see a sample code:

\n
import ReactDOM from 'react-dom'\nimport React, { useRef, useState } from 'react'\nimport { Canvas, useFrame } from 'react-three-fiber'\n\nfunction MyFrame(props) {\n  const Ref = useRef()\n  const [hover, setOnHover] = useState(false)\n  const [enable, setEnable] = useState(false)\n\n  useFrame(() => (Ref.current.rotation.x = Ref.current.rotation.y += 0.01))\n\n  return (\n    <Ref\n      {...props}\n      ref={Ref}\n      scale={enable ? [1.5, 1.5, 1.5] : [1, 1, 1]}\n      onClick={(e) => setEnable(!enable)}\n      onPointerOver={(e) => setOnHover(true)}\n      onPointerOut={(e) => setOnHover(false)}>\n      <boxBufferGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hover ? 'hotpink' : 'orange'} />\n    </Ref>\n  )\n}\n\nReactDOM.render(\n  <Canvas>\n    <pointLight position={[10, 10, 10]} />\n    <MyFrame position={[-3.2, 0, 0]} />\n    <MyFrame position={[2.2, 0, 0]} />\n  </Canvas>,\n  document.getElementById('root')\n)
\n

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

\n

react-nil

\n

A renderer for React that render nothing.

\n
import React, { useState, useEffect } from "react"\nimport { render } from "react-nil"\nfunction MyComponent() {\n  const [active, set] = useState(false)\n  useEffect(() => void setInterval(() => set((active) => !active), 1000), [])\n  return null\n}\n\nrender(<MyComponent />)
\n

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

\n

react-docx

\n

Another reconciler for DOCX.js.

\n

Let's understand with a sample code:

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

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

\n

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

\n","frontmatter":{"date":"June 23, 2021","updated_date":null,"title":"React renderers, react everywhere?","tags":["JavaScript","React","Renderer"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/3e300a00ec9a7919e0e181600a6fc755/ee604/react.png","srcSet":"/static/3e300a00ec9a7919e0e181600a6fc755/69585/react.png 200w,\n/static/3e300a00ec9a7919e0e181600a6fc755/497c6/react.png 400w,\n/static/3e300a00ec9a7919e0e181600a6fc755/ee604/react.png 800w,\n/static/3e300a00ec9a7919e0e181600a6fc755/f3583/react.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}}]}},"pageContext":{"tag":"Renderer"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}