pynecone-debounce-input

pynecone-debounce-input

A wrapper around the generic react-debounce-input component for the python-based full stack pynecone framework.

Since all events in pynecone are processed on the server-side, a client-side input debounce makes the app feel much less sluggish when working will fully controlled text inputs.

Example

import pynecone as pc

from pynecone_debounce_input import debounce_input

class State(pc.State):
    query: str = ""


app = pc.App(state=State)


@app.add_page
def index():
    return pc.center(
        pc.hstack(
            debounce_input(
                pc.input(
                    placeholder="Query",
                    value=State.query,
                    on_change=State.set_query,
                ),
            ),
            pc.text(State.query),
        )
    )

app.compile()

pc init
pc run

Also work with textarea, simply pass pc.text_area as the child. See larger example in the repo.

Usage

1. Include pynecone-debounce-input in your project requirements.txt.
2. Include a specific version of react-debounce-input in pcconfig.py.

config = pc.Config(
    ...,
    frontend_packages=[
        "react-debounce-input@3.3.0",
    ],
)

1. Wrap pynecone_debounce_input.debounce_input around the component to debounce (typically a pc.input or pc.text_area).

Props

See documentation for react-debounce-input.

min_length: int = 0

Minimal length of text to start notify, if value becomes shorter then minLength (after removing some characters), there will be a notification with empty value ''.

debounce_timeout: int = 100

Notification debounce timeout in ms. If set to -1, disables automatic notification completely. Notification will only happen by pressing Enter then.

force_notify_by_enter: bool = True

Notification of current value will be sent immediately by hitting Enter key. Enabled by-default. Notification value follows the same rule as with debounced notification, so if Length is less, then minLength - empty value '' will be sent back.

NOTE: if onKeyDown callback prop was present, it will be still invoked transparently.

force_notify_on_blur: bool = True

Same as force_notify_by_enter, but notification will be sent when focus leaves the input field.

Changelog

v0.3 - 2023-05-19

• Support pynecone >= 0.1.30 (pynecone.var changed to pynecone.vars)

v0.2 - 2023-04-24

• import pynecone_debounce_input automatically adds react-debounce-input to Config.frontend_packages
• fix example in README, missing comma
• improve test assertions when exporting example project

v0.1 - 2023-04-21

Initial Release