61 lines
1.3 KiB
JavaScript
61 lines
1.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Button } from 'primereact/button';
|
|
import ReactDOM from 'react-dom/client';
|
|
|
|
import logo from './logo.svg';
|
|
|
|
const WcTestApp = (props) => {
|
|
const [ctr,incr] = useState(0)
|
|
|
|
return (
|
|
<div className="App">
|
|
<header className="App-header">
|
|
<img src={logo} className="App-logo" alt="logo" />
|
|
<p>Hello! {props.name}.</p>
|
|
<Button label={`clicked ${ctr} times`} icon="pi pi-check" onClick={()=>{incr(ctr+1)}}/>
|
|
</header>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
WcTestApp.defaultProps = {
|
|
name: 'World'
|
|
};
|
|
|
|
// a wrapper class for react component
|
|
class WcTest extends HTMLElement {
|
|
root;
|
|
|
|
constructor(){
|
|
super()
|
|
let mountPoint = this;
|
|
|
|
// ShadowRoot (global styles will not apply, but safer with a complete isolation layer)
|
|
// mountPoint = this.attachShadow({ mode: 'open' });
|
|
|
|
this.root = ReactDOM.createRoot(mountPoint);
|
|
this.render()
|
|
}
|
|
|
|
// declare attributes we want to keep track of
|
|
static get observedAttributes() {
|
|
return ['name', 'onclick'];
|
|
}
|
|
|
|
// connectedCallback() {
|
|
// }
|
|
|
|
render(){
|
|
const name = this.hasAttribute('name')
|
|
? this.getAttribute('name')
|
|
: undefined;
|
|
|
|
this.root.render(<WcTestApp name={name} />);
|
|
}
|
|
|
|
attributeChangedCallback(){
|
|
this.render()
|
|
}
|
|
|
|
}
|
|
customElements.define('wc-test', WcTest); |