CoCalc -- react_demo.js

GitHub Repository: holoviz/panel
Path: blob/main/examples/how_to/custom/react/react_demo.js
²⁰¹² views

1
import confetti from "canvas-confetti";
2
import Button from '@mui/material/[email protected]&no-bundle';
3

4
function App(props) {
5
  const [color, setColor] = props.state.color
6
  const [text, setText ] = props.state.text
7
  const [celebrate, setCelebrate] = props.state.celebrate
8

9
  React.useEffect(() => confetti(), [celebrate])
10
  const style = {color: color}
11
  return (
12
    <>
13
      <h1 style={style}>{text}</h1>
14
      {props.child}
15
      <input
16
        value={text}
17
        onChange={e => setText(e.target.value)}
18
      />
19
      <Button variant="contained">Hello world</Button>
20
      <button onClick={() => confetti()}>Click me!</button>
21
    </>
22
  );
23
}
24

25
export function render({ state, el, children, view }) {
26
  return (
27
      <App state={state} child={children.child}/>
28
  )
29
}
30

31