How to init class with parameter?

[kolibril13]

Considering the following example:

import ipyreact

class MyExampleWidget(ipyreact.ReactWidget):
    name = "Hello World"
    _esm = f"""
    import * as React from "react";

    export default function Square() {{
        return <button> {name} </button> 
    }};"""
MyExampleWidget()

how can I add a parameter, so that I can call the widget like MyExampleWidget(name = "Hi there") ?

Here is a suggestion how this could look like:

import ipyreact

class MyExampleWidget(ipyreact.ReactWidget):
    def __init__(self, name):
        self.name = name
        print(self.name)

        self._esm = f"""
        import * as React from "react";

        export default function Square() {{
            return <button> {name} </button> 
        }};"""

MyExampleWidget(name = "Hi there")

[maartenbreddels]

import traitlets
import ipyreact

class MyExampleWidget(ipyreact.ReactWidget):
    myname = traitlets.Unicode("Hello World").tag(sync=True)
    _esm = """
    export default function Square({myname}) {
        return <button>{myname}</button> 
    };"""
w = MyExampleWidget()

This works, now you can mutate w.myname. Not that the name trait is 'taken' already, I am gonna change that in the next version, so we can use name freely.

[kolibril13]

Nice! This code works!

import traitlets
import ipyreact

class MyExampleWidget(ipyreact.ReactWidget):
    myname = traitlets.Unicode("Hello World").tag(sync=True)
    _esm = """
    import * as React from "react";
    export default function Square({myname}) {
        return <button>{myname}</button> 
    };"""
w = MyExampleWidget()
w.myname = "foo"
w

but is there also a way so that I can set the parameter also already in the initialization step like MyExampleWidget(myname = "foo") ?

[maartenbreddels]

MyExampleWidget(myname="foo") :)

[kolibril13]

That was too obvious :D I will soon contribute this as an example for the documentation:

import traitlets
import ipyreact

class MyExampleWidget(ipyreact.ReactWidget):
    myname = traitlets.Unicode("Hello World").tag(sync=True)
    _esm = """
    import * as React from "react";
    export default function Square({myname}) {
        return <button>{myname}</button> 
    };"""
w = MyExampleWidget(myname = "foo")
w

and is there any way one can still have an init function? If something like

class MyExampleWidget(ipyreact.ReactWidget):
    def __init__(self, name):
        self.name = name
         ....

was possible, we would get auto-completion:

[maartenbreddels]

Try:

import ipyreact
from traitlets import Any, Unicode, Int, observe, signature_has_traits

@signature_has_traits
class Tldraw(ipyreact.ReactWidget):
    ...

[kolibril13]

Yess, that works!

Thank you so much for showing me all these concepts today!

[maartenbreddels]

Hoping to see great things!