Painterro + React preview

Create empty React project:

npx create-react-app react-painterro
cd react-painterro/

This installed latest React "react": "^17.0.2",

Start VSCode there:

code .

Install painterro:

npm i painterro@latest 

Open terminal and start dev server:

npm start

Open generated App.js file and paste the code there:

import './App.css';
import Painterro from 'painterro';
import React, { useEffect } from 'react';
function App() {
  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    window.ptro = Painterro({
      id: 'painterro',
    }).show();
  });
  return (
    <div className="App">
      <div id="painterro">
      </div>
    </div>
  );
}
export default App;

I used useEffect hook to run code after HTML was mounted. Instad of calling .show instantly, you can call it later if you need. E.g use

window.ptro.show()

And we are done:

Painterro in React