Use Painterro with react

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

	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;