React component for Typograms

[dalssoft]

First, thank you for the contribution with this project! It's helping me a lot on docs for my open source project. I'm using it with docusaurus and, after a few tweaks, I was able to make it run.

However, in order to do that I had to change the code on typograms.js to expose the function create as window.createTypogram.

Here is the React component:

import { v4 as uuidv4 } from 'uuid';
import React, { Component } from 'react';

class Typogram extends Component {
    constructor() {
        super()
        this.id = uuidv4()
    }

    componentDidMount() {
        const script = document.getElementById(this.id)
        if (!script) return
        const svg = window.createTypogram(script)
        script.parentNode.insertBefore(svg, script.nextSibling)

    }
    render() {
        return (
            <div style={{ textAlign: 'center' }}>
                <script id={this.id} type="text/typogram">
                    {this.props.children}
                </script>
            </div>
        )
    }
}

export default Typogram;

Maybe there are better ways to do it. Anyways, I think it would be great if instead of using DOMContentLoaded method, there should be another ways to use the lib, like exposing the internal functions.

[ConcernedHobbit]

445eb4d separates the renderer from the browser logic, allowing usage in React easily:

import { useEffect, useRef } from "react";
import create from "typograms/src/typograms";

export const Typogram = ({ source }: { source: string }) => {
  const renderedSvg = create(source);
  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (divRef.current) {
      // Clear previous children
      divRef.current.innerHTML = "";

      // Append the rendered SVG element
      divRef.current.appendChild(renderedSvg);
    }
  }, [renderedSvg]);

  return <div ref={divRef} />;
};

function App() {
  return (
      <Typogram
        source={`
      +----+
      |    |---> My first diagram!
      +----+
      `}
      />
  );
}

Corresponding typograms.d.ts declaration:

declare module "typograms/src/typograms" {
  function create(
    source: string,
    zoom?: number,
    debug?: boolean
  ): SVGSVGElement;
  export = create;
}

The typograms "package" can be installed through GitHub:

yarn add https://github.com/google/typograms.git

[dalssoft]

Great @ConcernedHobbit ! Thanks! Closing the issue.