This is a custom React renderer designed to render to a pixelated display. The project is not coupled to any specific host environment, it uses an interface to draw. The interface looks like this:

interface Driver {
    drawText(text: string, x: number, y: number, color: string): void;
    drawPixel(x: number, y: number, color: string): void;
    // Get the height and width of some text
    stringDimensions(text: string): { width: number; height: number };
    
    init(): void;
    // Clear the entire display
    clear(): void;

    // Display height and width
    width: number;
    height: number;
}

Two driver interfaces are provided: one for a Pi-powered Adafruit LED Matrix and another for browser canvas. Also, a Flexbox implementation is provided, based on Yoga. There are examples in playground/.

Demo

const convertDate = (date: Date): string => {
  return format(utcToZonedTime(date, "America/Indianapolis"), "h:mm:ss a");
};

function App() {
  const [time, setTime] = useState(convertDate(new Date()));

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(convertDate(new Date()));
    }, 1000);

    return () => clearInterval(interval);
  }, [setTime]);

  return (
    <Flex justifyContent={"center"} alignItems={"center"}>
      <Text color={"orange"}>{time}</Text>
      <Text color={"orange"}>Testing again</Text>
    </Flex>
  );
}

Resources

• Based on Making a Custom React Renderer
• Canvas implementation from React on an OLED Display