#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.
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:
please share source code on codesandbox