Как использовать API CSS Paint с React ⇐ CSS

[Anonymous]

I'm trying to set the most basic example of React with the CSS Paint API.

I have no compiling errors and yet the example doesn't show.

Inside index.html:

CSS.paintWorklet.addModule('%PUBLIC_URL%/paintWorklet.js'); public/paintWorklet.js:

class Shape { paint(ctx, geom, properties) { ctx.strokeStyle = 'red'; ctx.lineWidth = 4; ctx.beginPath(); ctx.arc(200, 200, 50, 0, 2 * Math.PI); ctx.stroke(); ctx.closePath(); } } registerPaint('pattern', Shape); App.tsx:

import React from 'react'; import './App.css'; const TestDiv = () => { return( I am a TestDiv ) } function App() { return ( ); } export default App; App.css:

.TestDiv { background: paint(pattern); } So far I have tried to move the worklet inside src, having it inside a useEffect and still no luck.

Although this snippet inside index.html works.
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: paint(pattern); }

Источник: https://stackoverflow.com/questions/781 ... with-react