I m not sure what you mean but changing
I'm not exactly sure what you mean, but changing the value from the backend would look something like this:
import solara
import ipyreact
class AppInit(ipyreact.ReactWidget):
_esm = """
// import confetti from "canvas-confetti";
import * as React from "react";
export default function({value, set_value, debug}) {
React.useEffect(() => {
console.log('App init');
//set_value('xyz ' + value);
}, []);
React.useEffect(() => {
console.log(`value changed to ${value}`);
}, [value]);
return <h1>{value}</h1>
};"""
contexts = {}
@solara.component
def Page():
count, set_count = solara.use_state(0)
with solara.v.Sheet():
with solara.Div():
AppInit.element(value=count, on_value=print)
solara.Button(f"inc {count}", on_click=lambda: set_count(count + 1), color="primary")
Page()
import solara
import ipyreact
class AppInit(ipyreact.ReactWidget):
_esm = """
// import confetti from "canvas-confetti";
import * as React from "react";
export default function({value, set_value, debug}) {
React.useEffect(() => {
console.log('App init');
//set_value('xyz ' + value);
}, []);
React.useEffect(() => {
console.log(`value changed to ${value}`);
}, [value]);
return <h1>{value}</h1>
};"""
contexts = {}
@solara.component
def Page():
count, set_count = solara.use_state(0)
with solara.v.Sheet():
with solara.Div():
AppInit.element(value=count, on_value=print)
solara.Button(f"inc {count}", on_click=lambda: set_count(count + 1), color="primary")
Page()
1 Reply
And bi-directional would look like this:
import solara
import ipyreact
class AppInit(ipyreact.ReactWidget):
_esm = """
// import confetti from "canvas-confetti";
import * as React from "react";
export default function({value, set_value, debug}) {
React.useEffect(() => {
console.log('App init');
//set_value('xyz ' + value);
}, []);
React.useEffect(() => {
console.log(`value changed to ${value}`);
}, [value]);
return <div>
<button onClick={() => set_value(value+1)}>inc from frontend</button>
<h1>{value}</h1>
</div>
};"""
contexts = {}
@solara.component
def Page():
count, set_count = solara.use_state(0)
with solara.v.Sheet():
with solara.Div():
AppInit.element(value=count, on_value=set_count)
solara.Button(f"inc {count}", on_click=lambda: set_count(count + 1), color="primary")
Page()
import solara
import ipyreact
class AppInit(ipyreact.ReactWidget):
_esm = """
// import confetti from "canvas-confetti";
import * as React from "react";
export default function({value, set_value, debug}) {
React.useEffect(() => {
console.log('App init');
//set_value('xyz ' + value);
}, []);
React.useEffect(() => {
console.log(`value changed to ${value}`);
}, [value]);
return <div>
<button onClick={() => set_value(value+1)}>inc from frontend</button>
<h1>{value}</h1>
</div>
};"""
contexts = {}
@solara.component
def Page():
count, set_count = solara.use_state(0)
with solara.v.Sheet():
with solara.Div():
AppInit.element(value=count, on_value=set_count)
solara.Button(f"inc {count}", on_click=lambda: set_count(count + 1), color="primary")
Page()