tessl/pypi-reactpy

Reactive user interfaces with pure Python

—

Pending

Overview

Eval results

Files

HTML Elements

Name: tessl/pypi-reactpy
Author: tessl

Complete set of HTML element constructors for building user interfaces declaratively. ReactPy provides functions for all standard HTML elements that return VDOM dictionaries representing the virtual DOM structure.

Capabilities

Element Constructor Pattern

All HTML elements follow the same constructor pattern:

def element_name(*children, **attributes) -> VdomDict: ...

Parameters:

*children: Child elements (strings, other VDOM elements, or Component instances)
**attributes: HTML attributes as keyword arguments (use className for class)

Returns: VdomDict representing the element

Document Structure Elements

Elements for document structure and metadata:

def html(*children, **attributes) -> VdomDict: ...
def head(*children, **attributes) -> VdomDict: ...
def body(*children, **attributes) -> VdomDict: ...
def title(*children, **attributes) -> VdomDict: ...
def meta(**attributes) -> VdomDict: ...
def link(**attributes) -> VdomDict: ...
def base(**attributes) -> VdomDict: ...
def style(*children, **attributes) -> VdomDict: ...

Usage Examples:

from reactpy import html

# Document structure
document = html.html(
    html.head(
        html.title("My App"),
        html.meta(charset="utf-8"),
        html.link(rel="stylesheet", href="styles.css")
    ),
    html.body(
        html.h1("Welcome to My App")
    )
)

Content Sectioning Elements

Elements for organizing content into logical sections:

def header(*children, **attributes) -> VdomDict: ...
def nav(*children, **attributes) -> VdomDict: ...
def main(*children, **attributes) -> VdomDict: ...
def section(*children, **attributes) -> VdomDict: ...
def article(*children, **attributes) -> VdomDict: ...
def aside(*children, **attributes) -> VdomDict: ...
def footer(*children, **attributes) -> VdomDict: ...
def h1(*children, **attributes) -> VdomDict: ...
def h2(*children, **attributes) -> VdomDict: ...
def h3(*children, **attributes) -> VdomDict: ...
def h4(*children, **attributes) -> VdomDict: ...
def h5(*children, **attributes) -> VdomDict: ...
def h6(*children, **attributes) -> VdomDict: ...
def address(*children, **attributes) -> VdomDict: ...

Usage Examples:

page_layout = html.div(
    html.header(
        html.nav(
            html.ul(
                html.li(html.a({"href": "/"}, "Home")),
                html.li(html.a({"href": "/about"}, "About"))
            )
        )
    ),
    html.main(
        html.article(
            html.h1("Article Title"),
            html.p("Article content here...")
        ),
        html.aside(
            html.h3("Related Links"),
            html.ul(
                html.li(html.a({"href": "/related"}, "Related Page"))
            )
        )
    ),
    html.footer(
        html.p("© 2024 My Website")
    )
)

Text Content Elements

Elements for text content and structure:

def div(*children, **attributes) -> VdomDict: ...
def p(*children, **attributes) -> VdomDict: ...
def pre(*children, **attributes) -> VdomDict: ...
def blockquote(*children, **attributes) -> VdomDict: ...
def ol(*children, **attributes) -> VdomDict: ...
def ul(*children, **attributes) -> VdomDict: ...
def li(*children, **attributes) -> VdomDict: ...
def dl(*children, **attributes) -> VdomDict: ...
def dt(*children, **attributes) -> VdomDict: ...
def dd(*children, **attributes) -> VdomDict: ...
def figure(*children, **attributes) -> VdomDict: ...
def figcaption(*children, **attributes) -> VdomDict: ...
def hr(**attributes) -> VdomDict: ...

Usage Examples:

content = html.div(
    html.h2("Lists Example"),
    html.ul(
        html.li("First item"),
        html.li("Second item"),
        html.li("Third item")
    ),
    html.ol(
        html.li("Step one"),
        html.li("Step two"),
        html.li("Step three")
    ),
    html.dl(
        html.dt("Term"),
        html.dd("Definition of the term")
    ),
    html.figure(
        html.img({"src": "image.jpg", "alt": "Description"}),
        html.figcaption("Image caption")
    )
)

Inline Text Semantics

Elements for inline text formatting and semantics:

def a(*children, **attributes) -> VdomDict: ...
def em(*children, **attributes) -> VdomDict: ...
def strong(*children, **attributes) -> VdomDict: ...
def small(*children, **attributes) -> VdomDict: ...
def s(*children, **attributes) -> VdomDict: ...
def cite(*children, **attributes) -> VdomDict: ...
def q(*children, **attributes) -> VdomDict: ...
def dfn(*children, **attributes) -> VdomDict: ...
def abbr(*children, **attributes) -> VdomDict: ...
def code(*children, **attributes) -> VdomDict: ...
def var(*children, **attributes) -> VdomDict: ...
def samp(*children, **attributes) -> VdomDict: ...
def kbd(*children, **attributes) -> VdomDict: ...
def sub(*children, **attributes) -> VdomDict: ...
def sup(*children, **attributes) -> VdomDict: ...
def i(*children, **attributes) -> VdomDict: ...
def b(*children, **attributes) -> VdomDict: ...
def u(*children, **attributes) -> VdomDict: ...
def mark(*children, **attributes) -> VdomDict: ...
def span(*children, **attributes) -> VdomDict: ...
def br(**attributes) -> VdomDict: ...
def wbr(**attributes) -> VdomDict: ...

Usage Examples:

text_content = html.p(
    "This is ",
    html.strong("important"),
    " text with ",
    html.em("emphasis"),
    " and a ",
    html.a({"href": "https://example.com"}, "link"),
    ". Here's some ",
    html.code("inline code"),
    " and a ",
    html.kbd("Ctrl+C"),
    " keyboard shortcut."
)

Form Elements

Elements for creating interactive forms:

def form(*children, **attributes) -> VdomDict: ...
def label(*children, **attributes) -> VdomDict: ...
def input(**attributes) -> VdomDict: ...
def button(*children, **attributes) -> VdomDict: ...
def select(*children, **attributes) -> VdomDict: ...
def datalist(*children, **attributes) -> VdomDict: ...
def optgroup(*children, **attributes) -> VdomDict: ...
def option(*children, **attributes) -> VdomDict: ...
def textarea(*children, **attributes) -> VdomDict: ...
def output(*children, **attributes) -> VdomDict: ...
def progress(*children, **attributes) -> VdomDict: ...
def meter(*children, **attributes) -> VdomDict: ...
def fieldset(*children, **attributes) -> VdomDict: ...
def legend(*children, **attributes) -> VdomDict: ...

Usage Examples:

form_example = html.form(
    html.fieldset(
        html.legend("User Information"),
        html.div(
            html.label({"htmlFor": "name"}, "Name:"),
            html.input({"id": "name", "type": "text", "required": True})
        ),
        html.div(
            html.label({"htmlFor": "email"}, "Email:"),
            html.input({"id": "email", "type": "email", "required": True})
        ),
        html.div(
            html.label({"htmlFor": "country"}, "Country:"),
            html.select(
                {"id": "country"},
                html.option({"value": "us"}, "United States"),
                html.option({"value": "ca"}, "Canada"),
                html.option({"value": "uk"}, "United Kingdom")
            )
        ),
        html.div(
            html.label({"htmlFor": "message"}, "Message:"),
            html.textarea({"id": "message", "rows": 4})
        ),
        html.button({"type": "submit"}, "Submit")
    )
)

Table Elements

Elements for creating data tables:

def table(*children, **attributes) -> VdomDict: ...
def caption(*children, **attributes) -> VdomDict: ...
def colgroup(*children, **attributes) -> VdomDict: ...
def col(**attributes) -> VdomDict: ...
def tbody(*children, **attributes) -> VdomDict: ...
def thead(*children, **attributes) -> VdomDict: ...
def tfoot(*children, **attributes) -> VdomDict: ...
def tr(*children, **attributes) -> VdomDict: ...
def td(*children, **attributes) -> VdomDict: ...
def th(*children, **attributes) -> VdomDict: ...

Usage Examples:

data_table = html.table(
    html.caption("Sales Data"),
    html.thead(
        html.tr(
            html.th("Product"),
            html.th("Q1"),
            html.th("Q2"),
            html.th("Total")
        )
    ),
    html.tbody(
        html.tr(
            html.td("Widget A"),
            html.td("100"),
            html.td("150"),
            html.td("250")
        ),
        html.tr(
            html.td("Widget B"),
            html.td("75"),
            html.td("125"),
            html.td("200")
        )
    )
)

Multimedia Elements

Elements for images, audio, video, and embedded content:

def img(**attributes) -> VdomDict: ...
def iframe(**attributes) -> VdomDict: ...
def embed(**attributes) -> VdomDict: ...
def object(*children, **attributes) -> VdomDict: ...
def param(**attributes) -> VdomDict: ...
def video(*children, **attributes) -> VdomDict: ...
def audio(*children, **attributes) -> VdomDict: ...
def source(**attributes) -> VdomDict: ...
def track(**attributes) -> VdomDict: ...
def map(*children, **attributes) -> VdomDict: ...
def area(**attributes) -> VdomDict: ...
def canvas(*children, **attributes) -> VdomDict: ...

Usage Examples:

media_content = html.div(
    html.img({"src": "image.jpg", "alt": "Description", "width": 300}),
    html.video(
        {"controls": True, "width": 500},
        html.source({"src": "movie.mp4", "type": "video/mp4"}),
        html.source({"src": "movie.ogg", "type": "video/ogg"}),
        "Your browser does not support the video tag."
    ),
    html.audio(
        {"controls": True},
        html.source({"src": "audio.mp3", "type": "audio/mpeg"}),
        "Your browser does not support the audio tag."
    )
)

Interactive Elements

Elements for user interaction:

def details(*children, **attributes) -> VdomDict: ...
def summary(*children, **attributes) -> VdomDict: ...
def dialog(*children, **attributes) -> VdomDict: ...

Usage Examples:

interactive = html.div(
    html.details(
        html.summary("Click to expand"),
        html.p("This content is hidden by default")
    ),
    html.dialog(
        {"open": False, "id": "myDialog"},
        html.p("This is a dialog"),
        html.button({"onclick": "closeDialog()"}, "Close")
    )
)

Fragment Element

Special element for grouping without wrapper:

def _(*children, **attributes) -> VdomDict: ...

Usage Examples:

# Fragment allows multiple top-level elements without wrapper
fragment_example = html._(
    html.h1("Title"),
    html.p("Paragraph"),
    html.div("Content")
)

Attribute Handling

Special handling for certain attributes:

# className for CSS classes (not 'class' which is Python keyword)
element = html.div({"className": "my-class"})

# Boolean attributes
input_elem = html.input({"type": "checkbox", "checked": True, "disabled": False})

# Data attributes
custom_elem = html.div({"data-id": "123", "data-name": "example"})

# Event handlers
button = html.button(
    {"onClick": handle_click, "onSubmit": handle_submit},
    "Click me"
)

Install with Tessl CLI