Use Painterro with react

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',
  return (
    <div className="App">
      <div id="painterro">
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

And we are done:

Painterro in React

#painterro #react
Ivan Borshchov profile picture
Feb 21, 2022
by Ivan Borshchov
Did it help you?
Yes !

Best related

please share source code on codesandbox