├── .cargo └── config.toml ├── .fleet └── run.json ├── .github ├── FUNDING.yml ├── dependabot.yml └── workflows │ ├── book.yml │ ├── cd.yml │ ├── ci.yml │ ├── github-release.yml │ └── tests.yml ├── .gitignore ├── .idea ├── .gitignore ├── icon.svg ├── leptos-use.iml ├── misc.xml ├── modules.xml └── vcs.xml ├── CHANGELOG.md ├── Cargo.toml ├── LICENSE-APACHE ├── LICENSE-MIT ├── README.md ├── build.rs ├── docs ├── add_version_to_docs.py ├── book │ ├── .gitignore │ ├── book.toml │ ├── post_build.py │ ├── src │ │ ├── SUMMARY.md │ │ ├── animation │ │ │ ├── use_interval.md │ │ │ ├── use_interval_fn.md │ │ │ ├── use_raf_fn.md │ │ │ ├── use_timeout_fn.md │ │ │ └── use_timestamp.md │ │ ├── browser │ │ │ ├── use_breakpoints.md │ │ │ ├── use_broadcast_channel.md │ │ │ ├── use_clipboard.md │ │ │ ├── use_color_mode.md │ │ │ ├── use_cookie.md │ │ │ ├── use_css_var.md │ │ │ ├── use_display_media.md │ │ │ ├── use_event_listener.md │ │ │ ├── use_favicon.md │ │ │ ├── use_media_query.md │ │ │ ├── use_permission.md │ │ │ ├── use_preferred_contrast.md │ │ │ ├── use_preferred_dark.md │ │ │ ├── use_prefers_reduced_motion.md │ │ │ ├── use_service_worker.md │ │ │ ├── use_textarea_autosize.md │ │ │ ├── use_user_media.md │ │ │ ├── use_web_lock.md │ │ │ └── use_web_notification.md │ │ ├── changelog.md │ │ ├── codecs.md │ │ ├── component │ │ │ └── use_calendar.md │ │ ├── custom.css │ │ ├── demo.css │ │ ├── element_parameters.md │ │ ├── elements │ │ │ ├── use_active_element.md │ │ │ ├── use_document.md │ │ │ ├── use_document_visibility.md │ │ │ ├── use_draggable.md │ │ │ ├── use_drop_zone.md │ │ │ ├── use_element_bounding.md │ │ │ ├── use_element_size.md │ │ │ ├── use_element_visibility.md │ │ │ ├── use_intersection_observer.md │ │ │ ├── use_mouse_in_element.md │ │ │ ├── use_mutation_observer.md │ │ │ ├── use_resize_observer.md │ │ │ ├── use_window.md │ │ │ ├── use_window_focus.md │ │ │ ├── use_window_scroll.md │ │ │ └── use_window_size.md │ │ ├── extract_doc_comment.py │ │ ├── functions.md │ │ ├── generate_function_overview.py │ │ ├── get_started.md │ │ ├── intl │ │ │ ├── use_intl_number_format.md │ │ │ ├── use_locale.md │ │ │ └── use_locales.md │ │ ├── introduction.md │ │ ├── iterable │ │ │ └── use_sorted.md │ │ ├── math │ │ │ ├── use_abs.md │ │ │ ├── use_and.md │ │ │ ├── use_ceil.md │ │ │ ├── use_floor.md │ │ │ ├── use_max.md │ │ │ ├── use_min.md │ │ │ ├── use_not.md │ │ │ ├── use_or.md │ │ │ └── use_round.md │ │ ├── network │ │ │ ├── use_event_source.md │ │ │ └── use_websocket.md │ │ ├── options.md │ │ ├── reactivity │ │ │ ├── signal_debounced.md │ │ │ ├── signal_throttled.md │ │ │ └── sync_signal.md │ │ ├── sensors │ │ │ ├── on_click_outside.md │ │ │ ├── use_device_orientation.md │ │ │ ├── use_device_pixel_ratio.md │ │ │ ├── use_element_hover.md │ │ │ ├── use_geolocation.md │ │ │ ├── use_idle.md │ │ │ ├── use_infinite_scroll.md │ │ │ ├── use_mouse.md │ │ │ └── use_scroll.md │ │ ├── server_side_rendering.md │ │ ├── storage │ │ │ ├── use_local_storage.md │ │ │ ├── use_session_storage.md │ │ │ └── use_storage.md │ │ ├── utilities │ │ │ ├── header.md │ │ │ ├── is_err.md │ │ │ ├── is_none.md │ │ │ ├── is_ok.md │ │ │ ├── is_some.md │ │ │ ├── use_cycle_list.md │ │ │ ├── use_debounce_fn.md │ │ │ ├── use_derive_signal.md │ │ │ ├── use_supported.md │ │ │ ├── use_throttle_fn.md │ │ │ ├── use_to_string.md │ │ │ └── use_toggle.md │ │ └── watch │ │ │ ├── watch_debounced.md │ │ │ ├── watch_pausable.md │ │ │ ├── watch_throttled.md │ │ │ ├── watch_with_options.md │ │ │ └── whenever.md │ └── theme │ │ ├── favicon.png │ │ ├── favicon.svg │ │ ├── header.hbs │ │ └── index.hbs ├── generate_count_badge.py └── logo.svg ├── examples ├── Cargo.toml ├── on_click_outside │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── rust-toolchain.toml ├── signal_debounced │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── signal_throttled │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── src │ └── lib.rs ├── ssr │ ├── .gitignore │ ├── Cargo.toml │ ├── README.md │ ├── public │ │ └── favicon.ico │ ├── rust-toolchain.toml │ ├── src │ │ ├── app.rs │ │ ├── lib.rs │ │ └── main.rs │ └── style │ │ └── main.scss ├── sync_signal │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_abs │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_active_element │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_and │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_breakpoints │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_broadcast_channel │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_calendar │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_ceil │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_clipboard │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_color_mode │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_cookie │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_css_var │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_cycle_list │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_debounce_fn │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── rust-toolchain.toml │ └── src │ │ └── main.rs ├── use_device_orientation │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_device_pixel_ratio │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_display_media │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_document_visibility │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_draggable │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_drop_zone │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── img │ │ └── leptos-use-logo.svg │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_element_bounding │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_element_hover │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_element_size │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_element_visibility │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_event_listener │ ├── Cargo.toml │ ├── README.md │ ├── index.html │ ├── rust-toolchain.toml │ └── src │ │ └── main.rs ├── use_favicon │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── img │ │ ├── favicon-blue.svg │ │ ├── favicon-green.svg │ │ ├── favicon-leptos.ico │ │ ├── favicon-orange.svg │ │ └── favicon-red.svg │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_floor │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_geolocation │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_idle │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_infinite_scroll │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_intersection_observer │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_interval │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_interval_fn │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_intl_number_format │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_locale │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_locales │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_media_query │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_mouse │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_mouse_in_element │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_mutation_observer │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_not │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_or │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_permission │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_prefers_reduced_motion │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_raf_fn │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_resize_observer │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_round │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_scroll │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_service_worker │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── manifest.json │ ├── post_build.sh │ ├── res │ │ └── icon │ │ │ ├── maskable_icon_x128.png │ │ │ ├── maskable_icon_x192.png │ │ │ ├── maskable_icon_x384.png │ │ │ ├── maskable_icon_x48.png │ │ │ ├── maskable_icon_x512.png │ │ │ ├── maskable_icon_x72.png │ │ │ ├── maskable_icon_x96.png │ │ │ ├── pwa.png │ │ │ └── pwa.svg │ ├── rust-toolchain.toml │ ├── service-worker.js │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_sorted │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_storage │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_textarea_autosize │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_throttle_fn │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── rust-toolchain.toml │ └── src │ │ └── main.rs ├── use_timeout_fn │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_timestamp │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_toggle │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_user_media │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_web_lock │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_web_notification │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_websocket │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_webtransport │ ├── .cargo │ │ └── config.toml │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ ├── log_display.rs │ │ ├── main.rs │ │ ├── stream_bidir.rs │ │ └── stream_send.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_webtransport_with_server │ ├── client │ │ ├── Cargo.toml │ │ ├── README.md │ │ ├── Trunk.toml │ │ ├── index.html │ │ ├── input.css │ │ ├── rust-toolchain.toml │ │ ├── src │ │ │ ├── log_display.rs │ │ │ ├── main.rs │ │ │ ├── stream_bidir.rs │ │ │ └── stream_send.rs │ │ ├── style │ │ │ └── output.css │ │ └── tailwind.config.js │ └── server │ │ ├── .gitignore │ │ ├── Cargo.toml │ │ ├── cert.crt │ │ ├── cert.key │ │ ├── rust-toolchain.toml │ │ └── src │ │ └── main.rs ├── use_window_focus │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_window_scroll │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── use_window_size │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── watch_debounced │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js ├── watch_pausable │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ │ └── main.rs │ ├── style │ │ └── output.css │ └── tailwind.config.js └── watch_throttled │ ├── Cargo.toml │ ├── README.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ └── main.rs │ ├── style │ └── output.css │ └── tailwind.config.js ├── src ├── core │ ├── connection_ready_state.rs │ ├── datetime.rs │ ├── direction.rs │ ├── element_maybe_signal.rs │ ├── elements_maybe_signal.rs │ ├── maybe_rw_signal.rs │ ├── mod.rs │ ├── pointer_type.rs │ ├── position.rs │ ├── reconnect_limit.rs │ ├── size.rs │ ├── ssr_safe_method.rs │ ├── url.rs │ └── use_rw_signal.rs ├── docs │ ├── boolean_display.rs │ ├── demo.rs │ ├── mod.rs │ └── note.rs ├── is_err.rs ├── is_none.rs ├── is_ok.rs ├── is_some.rs ├── lib.rs ├── math │ ├── mod.rs │ ├── shared.rs │ ├── use_abs.rs │ ├── use_and.rs │ ├── use_ceil.rs │ ├── use_floor.rs │ ├── use_max.rs │ ├── use_min.rs │ ├── use_not.rs │ ├── use_or.rs │ └── use_round.rs ├── on_click_outside.rs ├── signal_debounced.rs ├── signal_throttled.rs ├── storage │ ├── mod.rs │ ├── use_local_storage.rs │ ├── use_session_storage.rs │ └── use_storage.rs ├── sync_signal.rs ├── use_active_element.rs ├── use_breakpoints.rs ├── use_broadcast_channel.rs ├── use_calendar.rs ├── use_clipboard.rs ├── use_color_mode.rs ├── use_cookie.rs ├── use_css_var.rs ├── use_cycle_list.rs ├── use_debounce_fn.rs ├── use_device_orientation.rs ├── use_device_pixel_ratio.rs ├── use_display_media.rs ├── use_document.rs ├── use_document_visibility.rs ├── use_draggable.rs ├── use_drop_zone.rs ├── use_element_bounding.rs ├── use_element_hover.rs ├── use_element_size.rs ├── use_element_visibility.rs ├── use_event_listener.rs ├── use_event_source.rs ├── use_favicon.rs ├── use_geolocation.rs ├── use_idle.rs ├── use_infinite_scroll.rs ├── use_intersection_observer.rs ├── use_interval.rs ├── use_interval_fn.rs ├── use_intl_number_format.rs ├── use_locale.rs ├── use_locales.rs ├── use_media_query.rs ├── use_mouse.rs ├── use_mouse_in_element.rs ├── use_mutation_observer.rs ├── use_permission.rs ├── use_preferred_contrast.rs ├── use_preferred_dark.rs ├── use_prefers_reduced_motion.rs ├── use_raf_fn.rs ├── use_resize_observer.rs ├── use_scroll.rs ├── use_service_worker.rs ├── use_sorted.rs ├── use_supported.rs ├── use_textarea_autosize.rs ├── use_throttle_fn.rs ├── use_timeout_fn.rs ├── use_timestamp.rs ├── use_to_string.rs ├── use_toggle.rs ├── use_user_media.rs ├── use_web_lock.rs ├── use_web_notification.rs ├── use_websocket.rs ├── use_webtransport.rs ├── use_window.rs ├── use_window_focus.rs ├── use_window_scroll.rs ├── use_window_size.rs ├── utils │ ├── filters │ │ ├── debounce.rs │ │ ├── mod.rs │ │ ├── pausable.rs │ │ └── throttle.rs │ ├── header.rs │ ├── header_macro.rs │ ├── is.rs │ ├── js.rs │ ├── js_value_from_to_string.rs │ ├── mod.rs │ ├── pausable.rs │ ├── sendwrap_fn.rs │ ├── signal_filtered.rs │ └── use_derive_signal.rs ├── watch_debounced.rs ├── watch_pausable.rs ├── watch_throttled.rs ├── watch_with_options.rs └── whenever.rs └── template ├── .ffizer.yaml ├── createfn.sh ├── docs └── book │ └── src │ └── {{ category }} │ └── {{ function_name }}.ffizer.hbs.md ├── examples └── {{ function_name }} │ ├── Cargo.ffizer.hbs.toml │ ├── README.ffizer.hbs.md │ ├── Trunk.toml │ ├── index.html │ ├── input.css │ ├── rust-toolchain.toml │ ├── src │ └── main.ffizer.hbs.rs │ ├── style │ └── output.css │ └── tailwind.config.js ├── modify_files.py └── src └── {{ module }} └── {{ function_name }}.ffizer.hbs.rs /.cargo/config.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | rustflags = ["--cfg=web_sys_unstable_apis"] 3 | rustdocflags = ["--cfg=web_sys_unstable_apis"] 4 | -------------------------------------------------------------------------------- /.fleet/run.json: -------------------------------------------------------------------------------- 1 | { 2 | "configurations": [ 3 | { 4 | "type": "cargo", 5 | "name": "Tests", 6 | "cargoArgs": ["test", "--features", "math,prost,serde,docs"], 7 | }, 8 | { 9 | "type": "cargo", 10 | "name": "Clippy", 11 | "cargoArgs": ["+nightly", "clippy", "--features", "math,prost,serde,docs", "--tests", "--", "-D", "warnings"], 12 | "workingDir": "./", 13 | }, 14 | 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: cargo 4 | directory: / 5 | schedule: 6 | interval: daily 7 | - package-ecosystem: github-actions 8 | directory: / 9 | schedule: 10 | interval: weekly -------------------------------------------------------------------------------- /.github/workflows/github-release.yml: -------------------------------------------------------------------------------- 1 | on: 2 | workflow_dispatch: 3 | 4 | name: GitHub Release 5 | 6 | permissions: write-all 7 | 8 | jobs: 9 | publish: 10 | name: Release 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v4 14 | - uses: CSchoel/release-notes-from-changelog@v1 15 | - name: Create Release using GitHub CLI 16 | env: 17 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 18 | run: > 19 | gh release create 20 | -d 21 | -F RELEASE.md 22 | -t "Version $RELEASE_VERSION" 23 | ${GITHUB_REF#refs/*/} 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | target 2 | Cargo.lock 3 | dist 4 | node_modules 5 | package*.json 6 | .vscode 7 | .DS_Store 8 | .ffizer -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | # Datasource local storage ignored files 7 | /dataSources/ 8 | /dataSources.local.xml 9 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docs/book/.gitignore: -------------------------------------------------------------------------------- 1 | book 2 | -------------------------------------------------------------------------------- /docs/book/book.toml: -------------------------------------------------------------------------------- 1 | [book] 2 | authors = ["Marc-Stefan Cassola"] 3 | language = "en" 4 | multilingual = false 5 | src = "src" 6 | title = "Leptos-Use Guide" 7 | 8 | [output.html] 9 | no-section-label = true 10 | additional-css = ["src/custom.css", "src/demo.css"] 11 | preferred-dark-theme = "coal" 12 | git-repository-url = "https://github.com/synphonyte/leptos-use" 13 | 14 | [preprocessor.cmdrun] -------------------------------------------------------------------------------- /docs/book/src/animation/use_interval.md: -------------------------------------------------------------------------------- 1 | # use_interval 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/animation/use_interval_fn.md: -------------------------------------------------------------------------------- 1 | # use_interval_fn 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/animation/use_raf_fn.md: -------------------------------------------------------------------------------- 1 | # use_raf_fn 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/animation/use_timeout_fn.md: -------------------------------------------------------------------------------- 1 | # use_timeout_fn 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/animation/use_timestamp.md: -------------------------------------------------------------------------------- 1 | # use_timestamp 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_breakpoints.md: -------------------------------------------------------------------------------- 1 | # use_breakpoints 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_broadcast_channel.md: -------------------------------------------------------------------------------- 1 | # use_broadcast_channel 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_clipboard.md: -------------------------------------------------------------------------------- 1 | # use_clipboard 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_color_mode.md: -------------------------------------------------------------------------------- 1 | # use_color_mode 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_cookie.md: -------------------------------------------------------------------------------- 1 | # use_cookie 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_css_var.md: -------------------------------------------------------------------------------- 1 | # use_css_var 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_display_media.md: -------------------------------------------------------------------------------- 1 | # use_display_media 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_event_listener.md: -------------------------------------------------------------------------------- 1 | # use_event_listener 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_favicon.md: -------------------------------------------------------------------------------- 1 | # use_favicon 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_media_query.md: -------------------------------------------------------------------------------- 1 | # use_media_query 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_permission.md: -------------------------------------------------------------------------------- 1 | # use_permission 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_preferred_contrast.md: -------------------------------------------------------------------------------- 1 | # use_preferred_contrast 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_preferred_dark.md: -------------------------------------------------------------------------------- 1 | # use_preferred_dark 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_prefers_reduced_motion.md: -------------------------------------------------------------------------------- 1 | # use_prefers_reduced_motion 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_service_worker.md: -------------------------------------------------------------------------------- 1 | # use_service_worker 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_textarea_autosize.md: -------------------------------------------------------------------------------- 1 | # use_textarea_autosize 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_user_media.md: -------------------------------------------------------------------------------- 1 | # use_user_media 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_web_lock.md: -------------------------------------------------------------------------------- 1 | # use_web_lock 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/browser/use_web_notification.md: -------------------------------------------------------------------------------- 1 | # use_web_notification 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/changelog.md: -------------------------------------------------------------------------------- 1 | {{#include ../../../CHANGELOG.md}} -------------------------------------------------------------------------------- /docs/book/src/component/use_calendar.md: -------------------------------------------------------------------------------- 1 | # use_calendar 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_active_element.md: -------------------------------------------------------------------------------- 1 | # use_active_element 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_document.md: -------------------------------------------------------------------------------- 1 | # use_document 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_document_visibility.md: -------------------------------------------------------------------------------- 1 | # use_document_visibility 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_draggable.md: -------------------------------------------------------------------------------- 1 | # use_draggable 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_drop_zone.md: -------------------------------------------------------------------------------- 1 | # use_drop_zone 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_element_bounding.md: -------------------------------------------------------------------------------- 1 | # use_element_bounding 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_element_size.md: -------------------------------------------------------------------------------- 1 | # use_element_size 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_element_visibility.md: -------------------------------------------------------------------------------- 1 | # use_element_visibility 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_intersection_observer.md: -------------------------------------------------------------------------------- 1 | # use_intersection_observer 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_mouse_in_element.md: -------------------------------------------------------------------------------- 1 | # use_mouse_in_element 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_mutation_observer.md: -------------------------------------------------------------------------------- 1 | # use_mutation_observer 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_resize_observer.md: -------------------------------------------------------------------------------- 1 | # use_resize_observer 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_window.md: -------------------------------------------------------------------------------- 1 | # use_window 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_window_focus.md: -------------------------------------------------------------------------------- 1 | # use_window_focus 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_window_scroll.md: -------------------------------------------------------------------------------- 1 | # use_window_scroll 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/elements/use_window_size.md: -------------------------------------------------------------------------------- 1 | # use_window_size 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/intl/use_intl_number_format.md: -------------------------------------------------------------------------------- 1 | # use_intl_number_format 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/intl/use_locale.md: -------------------------------------------------------------------------------- 1 | # use_locale 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/intl/use_locales.md: -------------------------------------------------------------------------------- 1 | # use_locales 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/iterable/use_sorted.md: -------------------------------------------------------------------------------- 1 | # use_sorted 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/math/use_abs.md: -------------------------------------------------------------------------------- 1 | # use_abs 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/math/use_and.md: -------------------------------------------------------------------------------- 1 | # use_and 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/math/use_ceil.md: -------------------------------------------------------------------------------- 1 | # use_ceil 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/math/use_floor.md: -------------------------------------------------------------------------------- 1 | # use_floor 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/math/use_max.md: -------------------------------------------------------------------------------- 1 | # use_max 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/math/use_min.md: -------------------------------------------------------------------------------- 1 | # use_min 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/math/use_not.md: -------------------------------------------------------------------------------- 1 | # use_not 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/math/use_or.md: -------------------------------------------------------------------------------- 1 | # use_or 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/math/use_round.md: -------------------------------------------------------------------------------- 1 | # use_round 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/network/use_event_source.md: -------------------------------------------------------------------------------- 1 | # use_event_source 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/network/use_websocket.md: -------------------------------------------------------------------------------- 1 | # use_websocket 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/reactivity/signal_debounced.md: -------------------------------------------------------------------------------- 1 | # signal_debounced 2 | 3 | -------------------------------------------------------------------------------- /docs/book/src/reactivity/signal_throttled.md: -------------------------------------------------------------------------------- 1 | # signal_throttled 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/reactivity/sync_signal.md: -------------------------------------------------------------------------------- 1 | # sync_signal 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/sensors/on_click_outside.md: -------------------------------------------------------------------------------- 1 | # on_click_outside 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/sensors/use_device_orientation.md: -------------------------------------------------------------------------------- 1 | # use_device_orientation 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/sensors/use_device_pixel_ratio.md: -------------------------------------------------------------------------------- 1 | # use_device_pixel_ratio 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/sensors/use_element_hover.md: -------------------------------------------------------------------------------- 1 | # use_element_hover 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/sensors/use_geolocation.md: -------------------------------------------------------------------------------- 1 | # use_geolocation 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/sensors/use_idle.md: -------------------------------------------------------------------------------- 1 | # use_idle 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/sensors/use_infinite_scroll.md: -------------------------------------------------------------------------------- 1 | # use_infinite_scroll 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/sensors/use_mouse.md: -------------------------------------------------------------------------------- 1 | # use_mouse 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/sensors/use_scroll.md: -------------------------------------------------------------------------------- 1 | # use_scroll 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/storage/use_local_storage.md: -------------------------------------------------------------------------------- 1 | # use_local_storage 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/storage/use_session_storage.md: -------------------------------------------------------------------------------- 1 | # use_session_storage 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/storage/use_storage.md: -------------------------------------------------------------------------------- 1 | # use_storage 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/utilities/header.md: -------------------------------------------------------------------------------- 1 | # header 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/utilities/is_err.md: -------------------------------------------------------------------------------- 1 | # is_err 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/utilities/is_none.md: -------------------------------------------------------------------------------- 1 | # is_none 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/utilities/is_ok.md: -------------------------------------------------------------------------------- 1 | # is_ok 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/utilities/is_some.md: -------------------------------------------------------------------------------- 1 | # is_some 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/utilities/use_cycle_list.md: -------------------------------------------------------------------------------- 1 | # use_cycle_list 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/utilities/use_debounce_fn.md: -------------------------------------------------------------------------------- 1 | # use_debounce_fn 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/utilities/use_derive_signal.md: -------------------------------------------------------------------------------- 1 | # use_derive_signal! 2 | 3 | Macro to easily create helper functions that derive a signal using a piece of code. 4 | 5 | See [`is_ok`](is_ok.md) or [`use_to_string`](use_to_string.md) as examples. 6 | -------------------------------------------------------------------------------- /docs/book/src/utilities/use_supported.md: -------------------------------------------------------------------------------- 1 | # use_supported 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/utilities/use_throttle_fn.md: -------------------------------------------------------------------------------- 1 | # use_throttle_fn 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/utilities/use_to_string.md: -------------------------------------------------------------------------------- 1 | # use_to_string 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/utilities/use_toggle.md: -------------------------------------------------------------------------------- 1 | # use_toggle 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/watch/watch_debounced.md: -------------------------------------------------------------------------------- 1 | # watch_debounced 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/watch/watch_pausable.md: -------------------------------------------------------------------------------- 1 | # watch_pausable 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/watch/watch_throttled.md: -------------------------------------------------------------------------------- 1 | # watch_throttled 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/watch/watch_with_options.md: -------------------------------------------------------------------------------- 1 | # watch_with_options 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/src/watch/whenever.md: -------------------------------------------------------------------------------- 1 | # whenever 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/book/theme/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Synphonyte/leptos-use/0edff4bed2adb2afaee3887644c78d67ab9571ef/docs/book/theme/favicon.png -------------------------------------------------------------------------------- /examples/on_click_outside/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "on_click_outside" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["on_click_outside", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/on_click_outside/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/on_click_outside/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/on_click_outside/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/on_click_outside/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/on_click_outside/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/signal_debounced/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "signal_debounced" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["signal_debounced", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/signal_debounced/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/signal_debounced/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/signal_debounced/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/signal_debounced/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/signal_debounced/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/signal_throttled/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "signal_throttled" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["signal_throttled", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/signal_throttled/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/signal_throttled/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/signal_throttled/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/signal_throttled/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/signal_throttled/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/src/lib.rs: -------------------------------------------------------------------------------- 1 | // necessary to be able to specify a release profile in the workspace root Cargo.toml 2 | -------------------------------------------------------------------------------- /examples/ssr/.gitignore: -------------------------------------------------------------------------------- 1 | # Generated by Cargo 2 | # will have compiled files and executables 3 | /target/ 4 | pkg 5 | Cargo.lock 6 | 7 | # These are backup files generated by rustfmt 8 | **/*.rs.bk 9 | 10 | # node e2e test tools and outputs 11 | node_modules/ 12 | test-results/ 13 | end2end/playwright-report/ 14 | playwright/.cache/ 15 | -------------------------------------------------------------------------------- /examples/ssr/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Synphonyte/leptos-use/0edff4bed2adb2afaee3887644c78d67ab9571ef/examples/ssr/public/favicon.ico -------------------------------------------------------------------------------- /examples/ssr/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/ssr/src/lib.rs: -------------------------------------------------------------------------------- 1 | pub mod app; 2 | 3 | #[cfg(feature = "hydrate")] 4 | #[wasm_bindgen::prelude::wasm_bindgen] 5 | pub fn hydrate() { 6 | use crate::app::App; 7 | 8 | console_error_panic_hook::set_once(); 9 | leptos::mount::hydrate_body(App); 10 | } 11 | -------------------------------------------------------------------------------- /examples/ssr/style/main.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | 6 | .dark { 7 | background-color: black; 8 | color: white; 9 | } -------------------------------------------------------------------------------- /examples/sync_signal/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "sync_signal" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["sync_signal", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/sync_signal/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/sync_signal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/sync_signal/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/sync_signal/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/sync_signal/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_abs/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_abs" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | console_error_panic_hook = "0.1" 12 | console_log = "1" 13 | log = "0.4" 14 | leptos-use = { path = "../..", default-features = false, features = ["docs", "math"] } 15 | web-sys = "0.3" 16 | 17 | [dev-dependencies] 18 | wasm-bindgen = { workspace = true } 19 | wasm-bindgen-test = { workspace = true } 20 | -------------------------------------------------------------------------------- /examples/use_abs/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_abs`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_abs/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_abs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_abs/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_abs/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_abs/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_active_element/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_active_element" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | console_error_panic_hook = "0.1" 12 | console_log = "1" 13 | log = "0.4" 14 | leptos-use = { path = "../..", default-features = false, features = ["use_active_element", "docs"] } 15 | web-sys = { version = "0.3", features = ["HtmlElement", "DomStringMap"] } 16 | 17 | [dev-dependencies] 18 | wasm-bindgen = { workspace = true } 19 | wasm-bindgen-test = { workspace = true } 20 | -------------------------------------------------------------------------------- /examples/use_active_element/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_active_element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_active_element/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_active_element/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_active_element/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_and/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_and" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | console_error_panic_hook = "0.1" 12 | console_log = "1" 13 | log = "0.4" 14 | leptos-use = { path = "../..", default-features = false, features = ["docs", "math"] } 15 | web-sys = "0.3" 16 | 17 | [dev-dependencies] 18 | wasm-bindgen = { workspace = true } 19 | wasm-bindgen-test = { workspace = true } 20 | -------------------------------------------------------------------------------- /examples/use_and/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_and`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_and/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_and/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_and/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_and/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_and/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_breakpoints/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_breakpoints" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_breakpoints", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_breakpoints/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_breakpoints/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_breakpoints/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_breakpoints/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_breakpoints/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_broadcast_channel/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_broadcast_channel" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | codee.workspace = true 12 | console_error_panic_hook = "0.1" 13 | console_log = "1" 14 | log = "0.4" 15 | leptos-use = { path = "../..", default-features = false, features = ["use_broadcast_channel", "docs"] } 16 | web-sys = "0.3" 17 | 18 | [dev-dependencies] 19 | wasm-bindgen = { workspace = true } 20 | wasm-bindgen-test = { workspace = true } 21 | -------------------------------------------------------------------------------- /examples/use_broadcast_channel/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_broadcast_channel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_broadcast_channel/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_broadcast_channel/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_broadcast_channel/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_calendar/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_calendar" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { path = "../..", features = ["use_calendar", "docs"] } 12 | web-sys = { workspace = true } 13 | chrono = "0.4" 14 | 15 | [dev-dependencies] 16 | wasm-bindgen = { workspace = true } 17 | wasm-bindgen-test = { workspace = true } 18 | -------------------------------------------------------------------------------- /examples/use_calendar/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_calendar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_calendar/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_calendar/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_calendar/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | transform: { 6 | rs: (content) => content.replace(/(?:^|\s)class:/g, ' '), 7 | }, 8 | }, 9 | theme: { 10 | extend: {}, 11 | }, 12 | corePlugins: { 13 | preflight: false, 14 | }, 15 | plugins: [ 16 | require('@tailwindcss/forms'), 17 | ], 18 | } -------------------------------------------------------------------------------- /examples/use_ceil/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_ceil" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | console_error_panic_hook = "0.1" 12 | console_log = "1" 13 | log = "0.4" 14 | leptos-use = { path = "../..", default-features = false, features = ["docs", "math"] } 15 | web-sys = "0.3" 16 | 17 | [dev-dependencies] 18 | wasm-bindgen = { workspace = true } 19 | wasm-bindgen-test = { workspace = true } 20 | -------------------------------------------------------------------------------- /examples/use_ceil/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_ceil`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_ceil/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_ceil/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_ceil/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_ceil/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_ceil/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_clipboard/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_clipboard" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_clipboard", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_clipboard/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_clipboard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_clipboard/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_clipboard/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_clipboard/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_color_mode/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_color_mode" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_color_mode", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_color_mode/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_color_mode/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_color_mode/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_color_mode/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_color_mode/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_cookie/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_cookie" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | codee.workspace = true 12 | console_error_panic_hook = "0.1" 13 | console_log = "1" 14 | log = "0.4" 15 | leptos-use = { path = "../..", default-features = false, features = ["use_cookie", "docs"] } 16 | rand = "0.8" 17 | getrandom = { version = "0.2", features = ["js"] } 18 | web-sys = "0.3" 19 | 20 | [dev-dependencies] 21 | wasm-bindgen = { workspace = true } 22 | wasm-bindgen-test = { workspace = true } 23 | -------------------------------------------------------------------------------- /examples/use_cookie/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_cookie`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_cookie/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_cookie/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_cookie/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_cookie/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_cookie/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_css_var/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_css_var" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_color_mode", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_css_var/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_css_var/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_css_var/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_css_var/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_css_var/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_cycle_list/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_cycle_list" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_cycle_list", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_cycle_list/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_cycle_list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_cycle_list/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_cycle_list/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_cycle_list/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_debounce_fn/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_debounce_fn" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_debounce_fn", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_debounce_fn/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_debounce_fn`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | rustup toolchain install nightly 9 | rustup target add wasm32-unknown-unknown 10 | ``` 11 | 12 | To run the demo: 13 | 14 | ```bash 15 | trunk serve --open 16 | ``` 17 | -------------------------------------------------------------------------------- /examples/use_debounce_fn/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_debounce_fn/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /examples/use_debounce_fn/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_device_orientation/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_device_orientation" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_device_orientation", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_device_orientation/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_device_orientation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_device_orientation/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_device_orientation/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_device_orientation/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_device_pixel_ratio/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_device_pixel_ratio" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_device_pixel_ratio", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_device_pixel_ratio/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_device_pixel_ratio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_device_pixel_ratio/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_device_pixel_ratio/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_device_pixel_ratio/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_display_media/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_display_media" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_display_media", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_display_media/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_display_media/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_display_media/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_display_media/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_display_media/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_document_visibility/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_document_visibility" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_document_visibility", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_document_visibility/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_document_visibility/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_document_visibility/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_document_visibility/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_document_visibility/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_draggable/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_draggable" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_draggable", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_draggable/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_draggable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_draggable/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_draggable/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_draggable/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_drop_zone/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_drop_zone" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_drop_zone", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_drop_zone/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_drop_zone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /examples/use_drop_zone/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_drop_zone/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_drop_zone/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_element_bounding/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_element_bounding" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_element_bounding", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_element_bounding/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_element_bounding/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_element_bounding/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_element_bounding/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_element_bounding/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_element_hover/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_element_hover" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_element_hover", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_element_hover/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_element_hover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_element_hover/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_element_hover/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_element_hover/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_element_size/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_element_size" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_element_size", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_element_size/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_element_size/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_element_size/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_element_size/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_element_size/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_element_visibility/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_element_visibility" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_element_visibility", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_element_visibility/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_element_visibility/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_element_visibility/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_element_visibility/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_element_visibility/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_event_listener/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_event_listener" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | console_error_panic_hook = "0.1" 12 | console_log = "1" 13 | log = "0.4" 14 | leptos-use = { path = "../..", default-features = false, features = ["use_event_listener"] } 15 | web-sys = "0.3" 16 | 17 | [dev-dependencies] 18 | wasm-bindgen = { workspace = true } 19 | wasm-bindgen-test = { workspace = true } 20 | -------------------------------------------------------------------------------- /examples/use_event_listener/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_event_listener`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | rustup toolchain install nightly 9 | rustup target add wasm32-unknown-unknown 10 | ``` 11 | 12 | Then, to run this example, execute in a terminal: 13 | 14 | ```bash 15 | trunk serve --open 16 | ``` -------------------------------------------------------------------------------- /examples/use_event_listener/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /examples/use_event_listener/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_favicon/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_favicon" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_favicon", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_favicon/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_favicon/img/favicon-leptos.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Synphonyte/leptos-use/0edff4bed2adb2afaee3887644c78d67ab9571ef/examples/use_favicon/img/favicon-leptos.ico -------------------------------------------------------------------------------- /examples/use_favicon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /examples/use_favicon/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_favicon/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_favicon/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_floor/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_floor" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | console_error_panic_hook = "0.1" 12 | console_log = "1" 13 | log = "0.4" 14 | leptos-use = { path = "../..", default-features = false, features = ["docs", "math"] } 15 | web-sys = "0.3" 16 | 17 | [dev-dependencies] 18 | wasm-bindgen = { workspace = true } 19 | wasm-bindgen-test = { workspace = true } 20 | -------------------------------------------------------------------------------- /examples/use_floor/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_floor`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_floor/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_floor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_floor/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_floor/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_floor/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_geolocation/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_geolocation" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_geolocation", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_geolocation/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_geolocation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_geolocation/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_geolocation/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_geolocation/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_idle/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_idle" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_idle", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_idle/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_idle`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_idle/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_idle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_idle/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_idle/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_idle/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_infinite_scroll/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_infinite_scroll" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_infinite_scroll", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_infinite_scroll/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_infinite_scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_infinite_scroll/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_infinite_scroll/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_infinite_scroll/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_intersection_observer/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_intersection_observer" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_intersection_observer", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_intersection_observer/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_intersection_observer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_intersection_observer/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_intersection_observer/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_intersection_observer/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_interval/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_interval" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_interval", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_interval/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_interval/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_interval/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_interval/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_interval/src/main.rs: -------------------------------------------------------------------------------- 1 | use leptos::prelude::*; 2 | use leptos_use::docs::demo_or_body; 3 | use leptos_use::{use_interval, UseIntervalReturn}; 4 | 5 | #[component] 6 | fn Demo() -> impl IntoView { 7 | let UseIntervalReturn { counter, .. } = use_interval(200); 8 | 9 | view! { 10 |
11 |

"Interval fired: " {counter}

12 |
13 | } 14 | } 15 | 16 | fn main() { 17 | _ = console_log::init_with_level(log::Level::Debug); 18 | console_error_panic_hook::set_once(); 19 | 20 | let unmount_handle = leptos::mount::mount_to(demo_or_body(), || { 21 | view! { } 22 | }); 23 | 24 | unmount_handle.forget(); 25 | } 26 | -------------------------------------------------------------------------------- /examples/use_interval/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_interval_fn/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_interval_fn" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | console_error_panic_hook = "0.1" 12 | console_log = "1" 13 | log = "0.4" 14 | leptos-use = { path = "../..", default-features = false, features = ["use_interval_fn", "docs", "math"] } 15 | web-sys = "0.3" 16 | 17 | [dev-dependencies] 18 | wasm-bindgen = { workspace = true } 19 | wasm-bindgen-test = { workspace = true } 20 | -------------------------------------------------------------------------------- /examples/use_interval_fn/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_interval_fn/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_interval_fn/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_interval_fn/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_interval_fn/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_intl_number_format/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_intl_number_format" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_intl_number_format", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_intl_number_format/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_intl_number_format/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_intl_number_format/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_intl_number_format/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_intl_number_format/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_locale/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_locale" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | console_error_panic_hook = "0.1" 12 | console_log = "1" 13 | log = "0.4" 14 | leptos-use = { path = "../..", default-features = false, features = ["use_locale", "docs"] } 15 | unic-langid = { version = "0.9", features = ["macros"] } 16 | web-sys = "0.3" 17 | 18 | [dev-dependencies] 19 | wasm-bindgen = { workspace = true } 20 | wasm-bindgen-test = { workspace = true } 21 | -------------------------------------------------------------------------------- /examples/use_locale/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_locale`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_locale/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_locale/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_locale/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_locale/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_locale/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_locales/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_locales" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_locales", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_locales/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_locales/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_locales/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_locales/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_locales/src/main.rs: -------------------------------------------------------------------------------- 1 | use leptos::prelude::*; 2 | use leptos_use::docs::demo_or_body; 3 | use leptos_use::use_locales; 4 | 5 | #[component] 6 | fn Demo() -> impl IntoView { 7 | let locales = use_locales(); 8 | 9 | view! { 10 | 
{move || format!("Locales:\n    {}", locales().join("\n    "))}
11 | } 12 | } 13 | 14 | fn main() { 15 | _ = console_log::init_with_level(log::Level::Debug); 16 | console_error_panic_hook::set_once(); 17 | 18 | let unmount_handle = leptos::mount::mount_to(demo_or_body(), || { 19 | view! { } 20 | }); 21 | 22 | unmount_handle.forget(); 23 | } 24 | -------------------------------------------------------------------------------- /examples/use_locales/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_media_query/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_media_query" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_media_query", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_media_query/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_media_query/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_media_query/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_media_query/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_media_query/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_mouse/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_mouse" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_mouse", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_mouse/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_mouse`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_mouse/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_mouse/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_mouse/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_mouse/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_mouse/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_mouse_in_element/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_mouse_in_element" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_mouse_in_element", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_mouse_in_element/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_mouse_in_element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_mouse_in_element/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_mouse_in_element/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_mouse_in_element/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_mutation_observer/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_mutation_observer" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_mutation_observer", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_mutation_observer/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_mutation_observer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_mutation_observer/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_mutation_observer/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_mutation_observer/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_not/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_not" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | console_error_panic_hook = "0.1" 12 | console_log = "1" 13 | log = "0.4" 14 | leptos-use = { path = "../..", default-features = false, features = ["docs", "math"] } 15 | web-sys = "0.3" 16 | 17 | [dev-dependencies] 18 | wasm-bindgen = { workspace = true } 19 | wasm-bindgen-test = { workspace = true } 20 | -------------------------------------------------------------------------------- /examples/use_not/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_not`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_not/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_not/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_not/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_not/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_not/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_or/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_or" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | console_error_panic_hook = "0.1" 12 | console_log = "1" 13 | log = "0.4" 14 | leptos-use = { path = "../..", default-features = false, features = ["docs", "math"] } 15 | web-sys = "0.3" 16 | 17 | [dev-dependencies] 18 | wasm-bindgen = { workspace = true } 19 | wasm-bindgen-test = { workspace = true } 20 | -------------------------------------------------------------------------------- /examples/use_or/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_or`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_or/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_or/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_or/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_or/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_or/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_permission/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_permission" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_permission", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_permission/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_permission/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_permission/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_permission/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_permission/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_prefers_reduced_motion/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_prefers_reduced_motion" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_prefers_reduced_motion", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_prefers_reduced_motion/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_prefers_reduced_motion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_prefers_reduced_motion/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/use_prefers_reduced_motion/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_prefers_reduced_motion/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_raf_fn/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_raf_fn" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_raf_fn", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_raf_fn/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_raf_fn`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_raf_fn/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_raf_fn/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_raf_fn/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_raf_fn/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_raf_fn/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_resize_observer/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_resize_observer" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_resize_observer", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_resize_observer/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_resize_observer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_resize_observer/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_resize_observer/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_resize_observer/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_round/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_round" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | console_error_panic_hook = "0.1" 12 | console_log = "1" 13 | log = "0.4" 14 | leptos-use = { path = "../..", default-features = false, features = ["docs", "math"] } 15 | web-sys = "0.3" 16 | 17 | [dev-dependencies] 18 | wasm-bindgen = { workspace = true } 19 | wasm-bindgen-test = { workspace = true } 20 | -------------------------------------------------------------------------------- /examples/use_round/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_round`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_round/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_round/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_round/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_round/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_round/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_scroll/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_scroll" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_scroll/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_scroll`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_scroll/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_scroll/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_scroll/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_scroll/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_service_worker/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_service_worker" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_service_worker", "docs"] } 12 | web-sys = { workspace = true } 13 | wasm-bindgen = { workspace = true } 14 | 15 | [dev-dependencies] 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_service_worker/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" 3 | 4 | [[hooks]] 5 | stage = "post_build" 6 | command = "bash" 7 | command_arguments = ["post_build.sh"] 8 | -------------------------------------------------------------------------------- /examples/use_service_worker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/use_service_worker/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_service_worker/res/icon/maskable_icon_x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Synphonyte/leptos-use/0edff4bed2adb2afaee3887644c78d67ab9571ef/examples/use_service_worker/res/icon/maskable_icon_x128.png -------------------------------------------------------------------------------- /examples/use_service_worker/res/icon/maskable_icon_x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Synphonyte/leptos-use/0edff4bed2adb2afaee3887644c78d67ab9571ef/examples/use_service_worker/res/icon/maskable_icon_x192.png -------------------------------------------------------------------------------- /examples/use_service_worker/res/icon/maskable_icon_x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Synphonyte/leptos-use/0edff4bed2adb2afaee3887644c78d67ab9571ef/examples/use_service_worker/res/icon/maskable_icon_x384.png -------------------------------------------------------------------------------- /examples/use_service_worker/res/icon/maskable_icon_x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Synphonyte/leptos-use/0edff4bed2adb2afaee3887644c78d67ab9571ef/examples/use_service_worker/res/icon/maskable_icon_x48.png -------------------------------------------------------------------------------- /examples/use_service_worker/res/icon/maskable_icon_x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Synphonyte/leptos-use/0edff4bed2adb2afaee3887644c78d67ab9571ef/examples/use_service_worker/res/icon/maskable_icon_x512.png -------------------------------------------------------------------------------- /examples/use_service_worker/res/icon/maskable_icon_x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Synphonyte/leptos-use/0edff4bed2adb2afaee3887644c78d67ab9571ef/examples/use_service_worker/res/icon/maskable_icon_x72.png -------------------------------------------------------------------------------- /examples/use_service_worker/res/icon/maskable_icon_x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Synphonyte/leptos-use/0edff4bed2adb2afaee3887644c78d67ab9571ef/examples/use_service_worker/res/icon/maskable_icon_x96.png -------------------------------------------------------------------------------- /examples/use_service_worker/res/icon/pwa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Synphonyte/leptos-use/0edff4bed2adb2afaee3887644c78d67ab9571ef/examples/use_service_worker/res/icon/pwa.png -------------------------------------------------------------------------------- /examples/use_service_worker/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_service_worker/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_sorted/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_sorted" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_sorted", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_sorted/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_sorted`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_sorted/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_sorted/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_sorted/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_sorted/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_sorted/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_storage/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_storage" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | codee = { workspace = true, features = ["json_serde"] } 8 | console_error_panic_hook = "0.1" 9 | console_log = "1" 10 | leptos = { workspace = true, features = [ 11 | "nightly", 12 | "csr", 13 | ] } 14 | leptos-use = { path = "../..", default-features = false, features = ["storage", "docs"] } 15 | log = "0.4" 16 | serde = "1.0.163" 17 | web-sys = "0.3" 18 | 19 | [dev-dependencies] 20 | wasm-bindgen = { workspace = true } 21 | wasm-bindgen-test = { workspace = true } 22 | -------------------------------------------------------------------------------- /examples/use_storage/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_storage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_storage/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_storage/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_storage/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_textarea_autosize/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_textarea_autosize" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = "0.1" 9 | console_log = "1" 10 | log = "0.4" 11 | leptos-use = { path = "../..", default-features = false, features = ["use_textarea_autosize", "docs"] } 12 | web-sys = "0.3" 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = "0.2" 16 | wasm-bindgen-test = "0.3.0" 17 | -------------------------------------------------------------------------------- /examples/use_textarea_autosize/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_textarea_autosize/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_textarea_autosize/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/use_textarea_autosize/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_textarea_autosize/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_throttle_fn/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_throttle_fn" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_throttle_fn", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_throttle_fn/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_throttle_fn`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | rustup toolchain install nightly 9 | rustup target add wasm32-unknown-unknown 10 | ``` 11 | 12 | To run the demo: 13 | 14 | ```bash 15 | trunk serve --open 16 | ``` 17 | -------------------------------------------------------------------------------- /examples/use_throttle_fn/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_throttle_fn/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /examples/use_throttle_fn/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_timeout_fn/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_timeout_fn" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_timeout_fn", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_timeout_fn/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_timeout_fn/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_timeout_fn/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_timeout_fn/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_timeout_fn/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_timestamp/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_timestamp" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_timestamp", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_timestamp/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_timestamp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_timestamp/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_timestamp/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_timestamp/src/main.rs: -------------------------------------------------------------------------------- 1 | use leptos::prelude::*; 2 | use leptos_use::docs::demo_or_body; 3 | use leptos_use::use_timestamp; 4 | 5 | #[component] 6 | fn Demo() -> impl IntoView { 7 | let timestamp = use_timestamp(); 8 | 9 | view! {
Timestamp: {timestamp}
} 10 | } 11 | 12 | fn main() { 13 | _ = console_log::init_with_level(log::Level::Debug); 14 | console_error_panic_hook::set_once(); 15 | 16 | let unmount_handle = leptos::mount::mount_to(demo_or_body(), || { 17 | view! { } 18 | }); 19 | 20 | unmount_handle.forget(); 21 | } 22 | -------------------------------------------------------------------------------- /examples/use_timestamp/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_toggle/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_toggle" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = "0.1" 9 | console_log = "1" 10 | log = "0.4" 11 | leptos-use = { path = "../..", default-features = false, features = ["use_toggle", "docs"] } 12 | web-sys = "0.3" 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = "0.2" 16 | wasm-bindgen-test = "0.3.0" 17 | -------------------------------------------------------------------------------- /examples/use_toggle/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_toggle`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | npm install -D tailwindcss @tailwindcss/forms 9 | rustup toolchain install nightly 10 | rustup target add wasm32-unknown-unknown 11 | ``` 12 | 13 | Then, open two terminals. In the first one, run: 14 | 15 | ``` 16 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 17 | ``` 18 | 19 | In the second one, run: 20 | 21 | ```bash 22 | trunk serve --open 23 | ``` -------------------------------------------------------------------------------- /examples/use_toggle/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_toggle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_toggle/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_toggle/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_toggle/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_user_media/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_user_media" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_user_media", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_user_media/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_user_media/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_user_media/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_user_media/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_user_media/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_web_lock/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_web_lock" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | gloo-timers = { version = "0.3", features = ["futures"] } 8 | leptos = { workspace = true, features = ["nightly", "csr"] } 9 | console_error_panic_hook = "0.1" 10 | console_log = "1" 11 | log = "0.4" 12 | leptos-use = { path = "../..", default-features = false, features = ["use_web_lock", "docs"] } 13 | web-sys = { version = "0.3", features = ["Lock"] } 14 | 15 | [dev-dependencies] 16 | wasm-bindgen = "0.2" 17 | wasm-bindgen-test = "0.3.0" 18 | -------------------------------------------------------------------------------- /examples/use_web_lock/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_web_lock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_web_lock/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_web_lock/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_web_lock/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_web_notification/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_web_notification" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_web_notification", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_web_notification/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_web_notification/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_web_notification/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_web_notification/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_web_notification/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_websocket/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_websocket" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | codee = { workspace = true, features = ["msgpack_serde"] } 12 | console_error_panic_hook = "0.1" 13 | console_log = "1" 14 | log = "0.4" 15 | leptos-use = { path = "../..", default-features = false, features = ["use_websocket", "docs"] } 16 | serde = { version = "1", features = ["derive"] } 17 | web-sys = "0.3" 18 | 19 | [dev-dependencies] 20 | wasm-bindgen = { workspace = true } 21 | wasm-bindgen-test = { workspace = true } 22 | -------------------------------------------------------------------------------- /examples/use_websocket/README.md: -------------------------------------------------------------------------------- 1 | A simple example for `use_websocket`. 2 | 3 | If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation) 4 | as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target: 5 | 6 | ```bash 7 | cargo install trunk 8 | rustup toolchain install nightly 9 | rustup target add wasm32-unknown-unknown 10 | ``` 11 | 12 | Then, open two terminals. In the first one, run: 13 | 14 | ``` 15 | npx tailwindcss -i ./input.css -o ./style/output.css --watch 16 | ``` 17 | 18 | In the second one, run: 19 | 20 | ```bash 21 | trunk serve --open 22 | ``` 23 | -------------------------------------------------------------------------------- /examples/use_websocket/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" 3 | -------------------------------------------------------------------------------- /examples/use_websocket/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_websocket/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/use_websocket/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/use_websocket/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [], 13 | } 14 | -------------------------------------------------------------------------------- /examples/use_webtransport/.cargo/config.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | rustflags = ["--cfg=web_sys_unstable_apis", "--cfg=has_std"] 3 | -------------------------------------------------------------------------------- /examples/use_webtransport/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_webtransport" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_web_notification", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_webtransport/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_webtransport/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_webtransport/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_webtransport/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_webtransport/src/log_display.rs: -------------------------------------------------------------------------------- 1 | use leptos::prelude::*; 2 | 3 | #[component] 4 | pub fn LogDisplay(#[prop(into)] log: Signal>) -> impl IntoView { 5 | view! { 6 |
7 |
    8 | {move || log().iter().map(|l| view! {
  • {l}
    • }).collect::>()} 9 |
10 |
11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/use_webtransport/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_webtransport_with_server/client/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_webtransport_with_server_client" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = [ 8 | "nightly", 9 | "csr", 10 | ] } 11 | console_error_panic_hook = "0.1" 12 | console_log = "1" 13 | log = "0.4" 14 | leptos-use = { path = "../../..", features = ["docs"] } 15 | web-sys = "0.3" 16 | 17 | [dev-dependencies] 18 | wasm-bindgen = "0.2" 19 | wasm-bindgen-test = "0.3.0" 20 | -------------------------------------------------------------------------------- /examples/use_webtransport_with_server/client/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_webtransport_with_server/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_webtransport_with_server/client/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_webtransport_with_server/client/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_webtransport_with_server/client/src/log_display.rs: -------------------------------------------------------------------------------- 1 | use leptos::prelude::*; 2 | 3 | #[component] 4 | pub fn LogDisplay(#[prop(into)] log: Signal>) -> impl IntoView { 5 | view! { 6 |
7 |
    8 | {move || log().iter().map(|l| view! {
  • {l}
    • }).collect::>()} 9 |
10 |
11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/use_webtransport_with_server/client/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_webtransport_with_server/server/.gitignore: -------------------------------------------------------------------------------- 1 | *.crt 2 | *.key 3 | *.pem -------------------------------------------------------------------------------- /examples/use_webtransport_with_server/server/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "webtransport_test_server" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | anyhow = "1" 8 | base64 = "0.21.0" 9 | rcgen = "0.10.0" 10 | ring = "0.16.20" 11 | time = "0.3.21" 12 | tokio = { version = "1", features = ["rt", "rt-multi-thread", "macros"] } 13 | tracing = "0.1" 14 | tracing-subscriber = { version = "0.3.17", features = ["env-filter"] } 15 | wtransport = "0.1" -------------------------------------------------------------------------------- /examples/use_webtransport_with_server/server/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_window_focus/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_window_focus" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_window_focus", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_window_focus/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_window_focus/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_window_focus/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_window_focus/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_window_focus/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_window_scroll/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_window_scroll" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["use_window_scroll", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/use_window_scroll/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_window_scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_window_scroll/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_window_scroll/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_window_scroll/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/use_window_size/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "use_window_size" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = "0.1" 9 | console_log = "1" 10 | log = "0.4" 11 | leptos-use = { path = "../..", default-features = false, features = ["use_window_size", "docs"] } 12 | web-sys = "0.3" 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = "0.2" 16 | wasm-bindgen-test = "0.3.0" 17 | -------------------------------------------------------------------------------- /examples/use_window_size/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/use_window_size/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/use_window_size/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/use_window_size/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /examples/use_window_size/src/main.rs: -------------------------------------------------------------------------------- 1 | use leptos::prelude::*; 2 | use leptos_use::docs::demo_or_body; 3 | use leptos_use::{use_window_size, UseWindowSizeReturn}; 4 | 5 | #[component] 6 | fn Demo() -> impl IntoView { 7 | let UseWindowSizeReturn { width, height } = use_window_size(); 8 | 9 | view! { 10 |

{ width } x { height }

11 | } 12 | } 13 | 14 | fn main() { 15 | _ = console_log::init_with_level(log::Level::Debug); 16 | console_error_panic_hook::set_once(); 17 | 18 | let unmount_handle = leptos::mount::mount_to(demo_or_body(), || { 19 | view! { } 20 | }); 21 | 22 | unmount_handle.forget(); 23 | } 24 | -------------------------------------------------------------------------------- /examples/use_window_size/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/watch_debounced/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "watch_debounced" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["watch_debounced", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/watch_debounced/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/watch_debounced/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/watch_debounced/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/watch_debounced/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/watch_debounced/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/watch_pausable/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "watch_pausable" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["watch_pausable", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/watch_pausable/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/watch_pausable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/watch_pausable/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/watch_pausable/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/watch_pausable/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /examples/watch_throttled/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "watch_throttled" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { workspace = true, features = ["watch_throttled", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /examples/watch_throttled/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /examples/watch_throttled/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/watch_throttled/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/watch_throttled/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" 3 | -------------------------------------------------------------------------------- /examples/watch_throttled/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } -------------------------------------------------------------------------------- /src/core/datetime.rs: -------------------------------------------------------------------------------- 1 | use cfg_if::cfg_if; 2 | 3 | /// SSR safe `Date.now()`. 4 | #[inline(always)] 5 | pub(crate) fn now() -> f64 { 6 | cfg_if! { if #[cfg(feature = "ssr")] { 7 | use std::time::{SystemTime, UNIX_EPOCH}; 8 | 9 | SystemTime::now() 10 | .duration_since(UNIX_EPOCH) 11 | .expect("Time went backwards") 12 | .as_millis() as f64 13 | } else { 14 | js_sys::Date::now() 15 | }} 16 | } 17 | -------------------------------------------------------------------------------- /src/core/position.rs: -------------------------------------------------------------------------------- 1 | #[derive(Copy, Clone, Default, Debug)] 2 | pub struct Position { 3 | pub x: f64, 4 | pub y: f64, 5 | } 6 | -------------------------------------------------------------------------------- /src/core/reconnect_limit.rs: -------------------------------------------------------------------------------- 1 | #[derive(Clone, Copy, Debug, PartialEq, Eq, Hash)] 2 | pub enum ReconnectLimit { 3 | Infinite, 4 | Limited(u64), 5 | } 6 | 7 | impl Default for ReconnectLimit { 8 | fn default() -> Self { 9 | ReconnectLimit::Limited(3) 10 | } 11 | } 12 | 13 | impl ReconnectLimit { 14 | pub fn is_exceeded_by(self, times: u64) -> bool { 15 | match self { 16 | ReconnectLimit::Infinite => false, 17 | ReconnectLimit::Limited(limit) => times >= limit, 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/core/size.rs: -------------------------------------------------------------------------------- 1 | #[derive(Copy, Clone, Default, Debug, PartialEq)] 2 | pub struct Size { 3 | pub width: f64, 4 | pub height: f64, 5 | } 6 | -------------------------------------------------------------------------------- /src/core/ssr_safe_method.rs: -------------------------------------------------------------------------------- 1 | #![allow(unused_macros, unused_imports)] 2 | 3 | macro_rules! impl_ssr_safe_method { 4 | ( 5 | $(#[$attr:meta])* 6 | $method:ident(&self$(, $p_name:ident: $p_ty:ty)*) -> $return_ty:ty 7 | $(; $($post_fix:tt)+)? 8 | ) => { 9 | $(#[$attr])* 10 | #[inline(always)] 11 | pub fn $method(&self, $($p_name: $p_ty),*) -> $return_ty { 12 | self.0.as_ref() 13 | .map( 14 | |w| w.$method($($p_name),*) 15 | ) 16 | $($($post_fix)+)? 17 | } 18 | }; 19 | } 20 | 21 | pub(crate) use impl_ssr_safe_method; 22 | -------------------------------------------------------------------------------- /src/docs/demo.rs: -------------------------------------------------------------------------------- 1 | use leptos::prelude::*; 2 | use wasm_bindgen::JsCast; 3 | 4 | pub fn demo_or_body() -> web_sys::HtmlElement { 5 | document() 6 | .get_element_by_id("demo-anchor") 7 | .map(|e| e.unchecked_into::()) 8 | .unwrap_or(document().body().expect("body to exist")) 9 | } 10 | -------------------------------------------------------------------------------- /src/docs/mod.rs: -------------------------------------------------------------------------------- 1 | //#![doc(cfg(feature = "docs"))] 2 | //! Collection of documentation related utilities. Used extensively in the examples. 3 | 4 | mod boolean_display; 5 | mod demo; 6 | mod note; 7 | 8 | pub use boolean_display::*; 9 | pub use demo::*; 10 | pub use note::*; 11 | -------------------------------------------------------------------------------- /src/docs/note.rs: -------------------------------------------------------------------------------- 1 | use leptos::prelude::*; 2 | 3 | #[component] 4 | pub fn Note(#[prop(optional, into)] class: String, children: Children) -> impl IntoView { 5 | let class = format!("note {class}"); 6 | 7 | view! {
{children()}
} 8 | } 9 | -------------------------------------------------------------------------------- /src/is_ok.rs: -------------------------------------------------------------------------------- 1 | use leptos::prelude::*; 2 | 3 | crate::use_derive_signal!( 4 | /// Reactive `Result::is_ok()`. 5 | /// 6 | /// ## Usage 7 | /// 8 | /// ``` 9 | /// # use leptos::prelude::*; 10 | /// # use leptos_use::is_ok; 11 | /// # 12 | /// # #[component] 13 | /// # fn Demo() -> impl IntoView { 14 | /// let (example, set_example) = signal( 15 | /// if js_sys::Math::random() < 0.5 { Ok("Example") } else { Err(()) } 16 | /// ); 17 | /// 18 | /// let is_ok = is_ok(example); 19 | /// # 20 | /// # view! { } 21 | /// # } 22 | /// ``` 23 | is_ok, T: 'static> -> bool 24 | |value| value.is_ok() 25 | ); 26 | -------------------------------------------------------------------------------- /src/math/mod.rs: -------------------------------------------------------------------------------- 1 | // #![doc(cfg(feature = "math"))] 2 | //! Collection of reactive math functions 3 | 4 | mod shared; 5 | mod use_abs; 6 | mod use_and; 7 | mod use_ceil; 8 | mod use_floor; 9 | mod use_max; 10 | mod use_min; 11 | mod use_not; 12 | mod use_or; 13 | mod use_round; 14 | 15 | pub use use_abs::*; 16 | pub use use_and::*; 17 | pub use use_ceil::*; 18 | pub use use_floor::*; 19 | pub use use_max::*; 20 | pub use use_min::*; 21 | pub use use_not::*; 22 | pub use use_or::*; 23 | pub use use_round::*; 24 | -------------------------------------------------------------------------------- /src/use_to_string.rs: -------------------------------------------------------------------------------- 1 | use leptos::prelude::*; 2 | 3 | crate::use_derive_signal!( 4 | /// Reactive `ToString::to_string()`. 5 | /// 6 | /// ## Usage 7 | /// 8 | /// ``` 9 | /// # use leptos::prelude::*; 10 | /// # use leptos_use::use_to_string; 11 | /// # 12 | /// # #[component] 13 | /// # fn Demo() -> impl IntoView { 14 | /// let (number, set_number) = signal(3.14_f64); 15 | /// let str = use_to_string::<_, f64>(number); 16 | /// # 17 | /// # view! { } 18 | /// # } 19 | /// ``` 20 | use_to_string -> String 21 | |value| value.to_string() 22 | ); 23 | -------------------------------------------------------------------------------- /src/utils/is.rs: -------------------------------------------------------------------------------- 1 | use crate::use_window; 2 | use lazy_static::lazy_static; 3 | 4 | lazy_static! { 5 | pub static ref IS_IOS: bool = if let Some(Ok(user_agent)) = 6 | use_window().navigator().map(|n| n.user_agent()) 7 | { 8 | user_agent.contains("iPhone") || user_agent.contains("iPad") || user_agent.contains("iPod") 9 | } else { 10 | false 11 | }; 12 | } 13 | -------------------------------------------------------------------------------- /src/utils/js.rs: -------------------------------------------------------------------------------- 1 | #[macro_export] 2 | macro_rules! js { 3 | ($attr:literal in $($obj:tt)*) => { 4 | wasm_bindgen::JsValue::from($attr).js_in($($obj)*) 5 | }; 6 | ($obj:ident[$attr:literal] = $($val:tt)*) => { 7 | let _ = js_sys::Reflect::set(&$obj, &$attr.into(), &($($val)*).into()); 8 | }; 9 | ($obj:ident[$attr:literal]) => { 10 | js_sys::Reflect::get(&$obj, &$attr.into()) 11 | }; 12 | } 13 | 14 | #[macro_export] 15 | macro_rules! js_fut { 16 | ($($obj:tt)*) => { 17 | wasm_bindgen_futures::JsFuture::from($($obj)*) 18 | }; 19 | 20 | } 21 | -------------------------------------------------------------------------------- /src/utils/js_value_from_to_string.rs: -------------------------------------------------------------------------------- 1 | #![allow(unused_macros, unused_imports)] 2 | 3 | macro_rules! js_value_from_to_string { 4 | ($name:ident) => { 5 | impl From<$name> for JsValue { 6 | fn from(value: $name) -> Self { 7 | JsValue::from(&value.to_string()) 8 | } 9 | } 10 | }; 11 | } 12 | 13 | pub(crate) use js_value_from_to_string; 14 | -------------------------------------------------------------------------------- /src/utils/pausable.rs: -------------------------------------------------------------------------------- 1 | use leptos::reactive::wrappers::read::Signal; 2 | 3 | /// Pausable effect 4 | #[derive(Clone)] 5 | pub struct Pausable 6 | where 7 | PauseFn: Fn() + Clone + Send + Sync, 8 | ResumeFn: Fn() + Clone + Send + Sync, 9 | { 10 | /// A Signal that indicates whether a pausable instance is active. `false` when paused. 11 | pub is_active: Signal, 12 | 13 | /// Temporarily pause the effect from executing 14 | pub pause: PauseFn, 15 | 16 | /// Resume the effect 17 | pub resume: ResumeFn, 18 | } 19 | -------------------------------------------------------------------------------- /template/createfn.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ffizer apply --source template --destination . -------------------------------------------------------------------------------- /template/docs/book/src/{{ category }}/{{ function_name }}.ffizer.hbs.md: -------------------------------------------------------------------------------- 1 | # {{ function_name }} 2 | 3 | 4 | -------------------------------------------------------------------------------- /template/examples/{{ function_name }}/Cargo.ffizer.hbs.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "{{ function_name }}" 3 | version = "0.1.0" 4 | edition = "2021" 5 | 6 | [dependencies] 7 | leptos = { workspace = true, features = ["nightly", "csr"] } 8 | console_error_panic_hook = { workspace = true } 9 | console_log = { workspace = true } 10 | log = { workspace = true } 11 | leptos-use = { path = "../..", features = ["{{ feature }}", "docs"] } 12 | web-sys = { workspace = true } 13 | 14 | [dev-dependencies] 15 | wasm-bindgen = { workspace = true } 16 | wasm-bindgen-test = { workspace = true } 17 | -------------------------------------------------------------------------------- /template/examples/{{ function_name }}/Trunk.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | public_url = "/demo/" -------------------------------------------------------------------------------- /template/examples/{{ function_name }}/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /template/examples/{{ function_name }}/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /template/examples/{{ function_name }}/rust-toolchain.toml: -------------------------------------------------------------------------------- 1 | [toolchain] 2 | channel = "nightly" -------------------------------------------------------------------------------- /template/examples/{{ function_name }}/src/main.ffizer.hbs.rs: -------------------------------------------------------------------------------- 1 | use leptos::prelude::*; 2 | use leptos_use::docs::demo_or_body; 3 | use leptos_use{{#if module}}::{{ module }}{{/if}}::{{ function_name }}; 4 | 5 | #[component] 6 | fn Demo() -> impl IntoView { 7 | 8 | {{ function_name }}(); 9 | 10 | view! { } 11 | } 12 | 13 | fn main() { 14 | _ = console_log::init_with_level(log::Level::Debug); 15 | console_error_panic_hook::set_once(); 16 | 17 | mount_to(demo_or_body(), || { 18 | view! { } 19 | }) 20 | } 21 | -------------------------------------------------------------------------------- /template/examples/{{ function_name }}/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: { 4 | files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"], 5 | }, 6 | theme: { 7 | extend: {}, 8 | }, 9 | corePlugins: { 10 | preflight: false, 11 | }, 12 | plugins: [ 13 | require('@tailwindcss/forms'), 14 | ], 15 | } --------------------------------------------------------------------------------