Reflex full-stack framework wrapper around react-debounce-input
Project description
reflex-debounce-input
A wrapper around the generic react-debounce-input
component for the
python-based full stack reflex framework.
Since all events in reflex 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 reflex as rx
from reflex_debounce_input import debounce_input
class State(rx.State):
query: str = ""
app = rx.App(state=State)
@app.add_page
def index():
return rx.center(
rx.hstack(
debounce_input(
rx.input(
placeholder="Query",
value=State.query,
on_change=State.set_query,
),
),
rx.text(State.query),
)
)
app.compile()
reflex init
reflex run
Also work with textarea, simply pass rx.text_area
as the child. See larger example in the repo.
Usage
- Include
reflex-debounce-input
in your projectrequirements.txt
. - Include a specific version of
react-debounce-input
inrxconfig.py
.
config = rx.Config(
...,
frontend_packages=[
"react-debounce-input@3.3.0",
],
)
- Wrap
reflex_debounce_input.debounce_input
around the component to debounce (typically arx.input
orrx.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 topynecone.vars
)
v0.2 - 2023-04-24
import reflex_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 reflex-debounce-input-0.4.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 9383d089c0ffa055f2f50ff678d2267d9206383a120d805b736954045b264336 |
|
MD5 | f628afa848c6f247b17ac767ca3ffc20 |
|
BLAKE2b-256 | 4715b4005ddca559a2d113049386f0e1a778443ae4ab6133450d2a7c152f61d6 |
Hashes for reflex_debounce_input-0.4-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 2bd81714accdc09ffa5a1ce70cd9393f858d328a5539fb6ea515da7a1095030f |
|
MD5 | fcabbb0a15e97f519a8677704af25ed0 |
|
BLAKE2b-256 | ffbce305ed0434b89c61b84c6b008822980b9b8b4f74cd84b8b054f10e055691 |