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.2 - 2023-04-24
import pynecone_debounce_input
automatically addsreact-debounce-input
toConfig.frontend_packages
- fix example in README, missing comma
- improve test assertions when exporting example project
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.2.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | a97717db7f434a0970ac670227a90c87191ace29e243de7595292144f18f66a7 |
|
MD5 | 9f5d90cb3948f5e238ad209d87ffd800 |
|
BLAKE2b-256 | 4d1697d215c7b01dd150565c827f1489658c6632cf87efa05cb8c97d05607c57 |
Hashes for pynecone_debounce_input-0.2-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 6cb3868c95809be50892dc95ea6940f87b0dad8ea3a73c02db8c179eb298675e |
|
MD5 | 10028b41fa289ee0d6dec8c26fb77312 |
|
BLAKE2b-256 | fd51696d2b5e40ea216cc8f4e047a55efbd378c52b597198ad7c1804b66b774e |