Skip to main content

Pynecone full-stack framework wrapper around react-debounce-input

Project description

pynecone-debounce-input

main branch test status PyPI version

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

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

pynecone-debounce-input-0.3.tar.gz (12.1 kB view hashes)

Uploaded Source

Built Distribution

pynecone_debounce_input-0.3-py3-none-any.whl (5.3 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page