DOM

import { useEffect, useRef, useState } from 'react';
import { elementToSVG } from 'dom-to-svg';
import SVG from 'react-inlinesvg';
import { RoughSVG } from 'react-rough-fiber';
import './style.css';

export default function App() {
  const [svg, setSVG] = useState('');
  const ref = useRef();
  useEffect(() => {
    if (ref.current) {
      const svgDocument = elementToSVG(ref.current);
      const svgString = new XMLSerializer().serializeToString(svgDocument)
      setSVG(svgString);
    }
  }, [])
  return (
    <>
      <div className="dom-container" ref={ref}>
        <div>
          <span className="title">
            React Rough Fiber
          </span>
          <p>A React renderer for rendering hand-drawn SVGs</p>
        </div>
        <div className="button-container">
          <span className="button">
            Go
          </span>
        </div>
      </div>
      <RoughSVG options={{seed: 2}}>
        <SVG src={svg} />
      </RoughSVG>
    </>
  );
}