Use Painterro with react

#StandWithUkraine

Today, 20th March 2023, Ukraine is still bravely fighting for democratic values, human rights and peace in whole world. Russians ruthlessly kill all civilians in Ukraine including childs and destroy their cities. We are uniting against Putin’s invasion and violence, in support of the people in Ukraine. You can help by donating to Ukrainian's army.

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 [email protected]

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

Feb 21, 2022

by Ivan Borshchov

Did it help you?

Yes !

Best related

JS paint plugin for your website 🎨

Using painterro with Vue.js

How to generate a webfont [automated setup]

note the principle

09 Mar 2022

please share source code on codesandbox

	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;