Early Stage

This project is still in early stage. The goal is to prove the idea of using React components to render in Node canvas.

Features

• Support React components (View, Image, Text).
• Support flex layout.
• Support border drawing.

Simple Example

import * as React from "react";
import { writeFileSync } from "fs";
import { renderToBuffer, Canvas, View, Image, Text } from "react2image";

renderToBuffer(
  <Canvas width={500} height={500} backgroundColor='orange'>
    <View
      style={{
        width: 460,
        height: 380,
        marginTop: 100,
        marginLeft: 20,
        marginRight: 20,
        borderRadius: 5,
        backgroundColor: "white",
      }}
    >
      <Image
        src={__dirname + "/icon.png"}
        style={{
          width: 80,
          height: 80,
          marginLeft: 180,
          backgroundColor: "green",
        }}
      />
      <View
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-around",
          flexDirection: "row",
          marginTop: 20,
        }}
      >
        <View
          style={{
            backgroundColor: "purple",
            width: 90,
            height: 120,
            borderRadius: 5,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            border: "3px solid green",
          }}
        >
          <Text style={{ color: "white", font: '30px solid' }}>Hello</Text>
        </View>
        <View
          style={{
            backgroundColor: "purple",
            width: 90,
            height: 120,
            borderRadius: 5,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            border: "3px solid green",
          }}
        >
          <Text style={{ color: "white", font: '30px solid' }}>World</Text>
        </View>
      </View>
    </View>
  </Canvas>
).then((buffer) => {
  writeFileSync(__dirname + "/helloworld.png", buffer);
});

License

MIT