Pynecone full-stack framework wrapper around react-debounce-input
Project description
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
- Include
pynecone-debounce-input
in your projectrequirements.txt
. - Include a specific version of
react-debounce-input
inpcconfig.py
.
config = pc.Config(
...,
frontend_packages=[
"react-debounce-input@3.3.0",
],
)
- Wrap
pynecone_debounce_input.debounce_input
around the component to debounce (typically apc.input
orpc.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.1 - 2023-04-21
Initial Release
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for pynecone-debounce-input-0.1.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | be7f6bcdf3572a566cfeb44bd32e5e3daffbfe075712c0e296c5daac266e318c |
|
MD5 | 17574c6f3ce13a7dbf5f0ec4df70c703 |
|
BLAKE2b-256 | 0ae77ca4369185265d210ffe013d6bd16f3cb70de131280e6b1fe010c4754b93 |
Hashes for pynecone_debounce_input-0.1-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 138731cb56143c463408858b194baf928e9f3ed8dde926eb6a8f31227f0cd67b |
|
MD5 | d0b3063ad29adf6c57ca74d63182243d |
|
BLAKE2b-256 | e952d23e2b9503d915f298e458faab52efeb089c353560151e087122748eb8e3 |