Crate yew_hooks

Expand description

§Yew Hooks

Hooks for Yew, inspired by streamich/react-use and alibaba/hooks.

§Examples

use yew::prelude::*;

use yew_hooks::use_counter;

#[function_component(Counter)]
fn counter() -> Html {
    let counter = use_counter(0);

    let onincrease = {
        let counter = counter.clone();
        Callback::from(move |_| counter.increase())
    };
    let ondecrease = {
        let counter = counter.clone();
        Callback::from(move |_| counter.decrease())
    };
    let onincreaseby = {
        let counter = counter.clone();
        Callback::from(move |_| counter.increase_by(10))
    };
    let ondecreaseby = {
        let counter = counter.clone();
        Callback::from(move |_| counter.decrease_by(10))
    };
    let onset = {
        let counter = counter.clone();
        Callback::from(move |_| counter.set(100))
    };
    let onreset = {
        let counter = counter.clone();
        Callback::from(move |_| counter.reset())
    };

    html! {
        <div>
            <button onclick={onincrease}>{ "Increase" }</button>
            <button onclick={ondecrease}>{ "Decrease" }</button>
            <button onclick={onincreaseby}>{ "Increase by 10" }</button>
            <button onclick={ondecreaseby}>{ "Decrease by 10" }</button>
            <button onclick={onset}>{ "Set to 100" }</button>
            <button onclick={onreset}>{ "Reset" }</button>
            <p>
                <b>{ "Current value: " }</b>
                { *counter }
            </p>
        </div>
    }
}

§Demo

Check out a live demo

Modules§

prelude

Structs§

CloseEvent: The CloseEvent class.
CookieAttributes: Attributes for setting cookies
LocationState: State for brower’s location.
UseAsyncHandle: State handle for the use_async hook.
UseAsyncOptions: Options for use_async_with_options.
UseAsyncState: State for an async future.
UseClipboardHandle: State handle for the use_clipboard hook.
UseCookieHandle: State handle for the use_cookie hook.
UseCounterHandle: State handle for the use_counter hook.
UseDebounceHandle: State handle for the use_debounce hook.
UseDebounceStateHandle: State handle for the use_debounce_state hook.
UseDefaultHandle: State handle for the use_default hook.
UseDragHandle: State handle for the use_drag hook.
UseDragOptions: Options for drag.
UseDropHandle: State handle for the use_drop hook.
UseDropOptions: Options for drop.
UseFullscreenHandle: State handle for the use_fullscreen hook.
UseGeolocationOptions: The PositionOptions dictionary.
UseGeolocationState
UseHashHandle: State handle for the use_hash hook.
UseIdleHandle: State handle for the use_idle hook.
UseIdleOptions: Configuration options for the use_idle hook.
UseLatestHandle: State handle for the use_latest hook.
UseListHandle: State handle for the use_list hook.
UseLocalStorageHandle: State handle for the use_local_storage hook.
UseLongPressHandle: State handle for the use_long_press hook.
UseLongPressOptions: Options for long press.
UseMapHandle: State handle for the use_map hook.
UseMeasureState
UseMediaHandle: State handle for the use_media hook.
UseMediaOptions: Options for media
UseMutLatestHandle: State handle for the use_mut_latest hook.
UsePreviousHandle: State handle for the use_previous hook.
UseQueueHandle: State handle for the use_queue hook.
UseRafStateHandle: State handle for the use_raf_state hook.
UseSessionStorageHandle: State handle for the use_session_storage hook.
UseSetHandle: State handle for the use_set hook.
UseStatePtrEqHandle: State handle for the use_state_ptr_eq hook.
UseSwipeHandle: State handle for the use_swipe hook.
UseSwipeOptions: Options for swipe.
UseThemeHandle: State handle for the use_theme hook.
UseThrottleHandle: State handle for the use_throttle hook.
UseThrottleStateHandle: State handle for the use_throttle_state hook.
UseTimeoutHandle: State handle for the use_timeout hook.
UseToggleHandle: State handle for the use_toggle hook.
UseVirtualListHandle: State handle for the use_virtual_list hook.
UseWebSocketHandle: State handle for the use_websocket hook.
UseWebSocketOptions: Options for WebSocket.
VirtualListItem: State handle for the use_virtual_list hook.

Enums§

SameSite: SameSite attribute values
UseSwipeDirection: Swipe direction.
UseWebSocketReadyState: The current state of the WebSocket connection.

Functions§

use_async: This hook returns state and a run callback for an async future.
use_async_with_options: This hook returns state and a run callback for an async future with options. See use_async too.
use_before_unload: A side-effect hook that shows browser alert when user try to reload or close the page.
use_bool_toggle: This hook is a simplified use_toggle to manage boolean toggle state in a function component.
use_click_away: A hook that triggers a callback when user clicks outside the target element.
use_clipboard: This hook is used to read from or write to clipboard for text or bytes. e.g. copy plain text or copy image/png file to clipboard.
use_cookie: A side-effect hook that manages a single cookie.
use_counter: This hook is used to manage counter state in a function component.
use_debounce: A hook that delays invoking a function until after wait milliseconds have elapsed since the last time the debounced function was invoked.
use_debounce_effect: A hook that delays calling effect callback until after wait milliseconds have elapsed since the last time effect callback was called.
use_debounce_effect_with_deps: This hook is similar to use_debounce_effect but it accepts dependencies.
use_debounce_state: A hook that delays updating state until after wait milliseconds have elapsed since the last time state was updated.
use_default: A state hook that returns the default value when state is None.
use_drag: This hook tracks file, link and copy-paste drags.
use_drag_with_options: This hook tracks file, link and copy-paste drags. use_drag hook with options.
use_drop: This hook tracks file, link and copy-paste drops.
use_drop_with_options: This hook tracks file, link and copy-paste drops. use_drop hook with options.
use_effect_once: A lifecycle hook that runs an effect only once.
use_effect_update: This hook ignores the first invocation (e.g. on mount). The signature is exactly the same as the use_effect hook.
use_effect_update_with_deps: This hook is similar to use_effect_update but it accepts dependencies. The signature is exactly the same as the use_effect_with hook.
use_event: A hook that subscribes a callback to events.
use_event_with_window: A hook that subscribes a callback to events only for window. If you want to specify an event target, use use_event.
use_favicon: A side-effect hook that sets favicon of the page.
use_fullscreen: This hook provides functionality to control fullscreen mode for elements. It allows entering, exiting, and toggling fullscreen mode, and tracks the current fullscreen state and element.
use_geolocation: A sensor hook that tracks user’s geographic location.
use_geolocation_with_options: A sensor hook that tracks user’s geographic location. See use_geolocation
use_hash: A sensor hook that tracks brower’s location hash value.
use_hovered: A sensor hook that tracks whether HTML element is being hovered.
use_idle: This hook tracks whether the user is idle (not interacting with the page). It listens for various user events (mouse, keyboard, scroll, etc.) and resets an internal timer. When the timer expires, the user is considered idle.
use_idle_with_options: This hook tracks whether the user is idle with custom configuration options.
use_infinite_scroll: A sensor hook that tracks infinite scrolling of the element.
use_interval: A hook that schedules an interval to invoke callback every millis milliseconds. The interval will be cancelled if millis is set to 0.
use_is_first_mount: A hook returns true if component is just mounted (on first render) and false otherwise.
use_is_mounted: A hook returns true if component is mounted and false otherwise.
use_latest: This hook returns the latest immutable ref to state or props.
use_list: A hook that tracks a list and provides methods to modify it.
use_local_storage: A side-effect hook that manages a single localStorage key.
use_location: A sensor hook that tracks brower’s location value.
use_logger: This hook logs in console as component goes through life-cycles.
use_logger_eq: This hook logs in console as component goes through life-cycles. Like use_logger but only logs when prev_state != next_state. This requires the props to implement PartialEq.
use_long_press: A hook that detects when a user presses and holds an element for a specified duration.
use_long_press_with_options: A hook that detects when a user presses and holds an element for a specified duration with options.
use_map: A hook that tracks a hash map and provides methods to modify it.
use_measure: A sensor hook that tracks an HTML element’s dimensions using the ResizeObserver API.
use_media: This hook plays video or audio and exposes its controls.
use_media_with_options: This hook plays video or audio and exposes its controls with options. see use_media
use_mount: A lifecycle hook that calls a function after the component is mounted.
use_mut_latest: This hook returns the latest mutable ref to state or props.
use_permission: A sensor hook that tracks browser’s permission changes
use_previous: This hook returns the previous immutable ref to state or props.
use_queue: A hook that tracks a queue and provides methods to modify it.
use_raf: An animation hook that forces component to re-render on each requestAnimationFrame, returns percentage of time elapsed. millis - milliseconds for how long to keep re-rendering component. delay — delay in milliseconds after which to start re-rendering component.
use_raf_state: A state hook that only updates state in the callback of requestAnimationFrame.
use_renders_count: A hook that counts component renders.
use_scroll: A sensor hook that tracks an HTML element’s scroll position.
use_scrolling: A sensor hook that tracks whether HTML element is scrolling.
use_search_param: A sensor hook that tracks brower’s location search param value.
use_session_storage: A side-effect hook that manages a single sessionStorage key.
use_set: A hook that tracks a hash set and provides methods to modify it.
use_size: A sensor hook that tracks an HTML element’s dimensions using the ResizeObserver API.
use_state_ptr_eq: Similar to use_state_eq, but check if the two Rcs of values point to the same allocation, instead of PartialEq of the values.
use_swipe: A sensor hook that detects swipe based on TouchEvent.
use_swipe_with_options: A sensor hook that detects swipe based on TouchEvent with options. If you want to detect for window, pass NodeRef::default() to param node.
use_swipe_with_window: A sensor hook that detects swipe based on TouchEvent for window. See use_swipe.
use_theme: A hook to manage light/dark theme with persistence and system preference support.
use_throttle: A hook that throttles invoking a function, the function is only executed once every millis.
use_throttle_effect: A hook that throttles calling effect callback, it is only called once every millis.
use_throttle_effect_with_deps: This hook is similar to use_throttle_effect but it accepts dependencies.
use_throttle_state: A hook that throttles updating state, the state is only updated once every millis.
use_timeout: A hook that schedules a timeout to invoke callback in millis milliseconds from now. The timeout will be cancelled if millis is set to 0 or cancel() is called.
use_title: A side-effect hook that sets title of the page and restore previous title when unmount.
use_toggle: This hook is used to manage toggle state in a function component.
use_unmount: A lifecycle hook that calls a function when the component will unmount.
use_update: A hook returns a function that forces component to re-render when called.
use_virtual_list: A hook that provides virtual scrolling for large lists.
use_visible: Check if an element is visible. Internally, it uses an IntersectionObserver to receive notifications from the browser whenever the visibility state of the node changes.
use_websocket: This hook communicates with WebSocket.
use_websocket_with_options: This hook communicates with WebSocket with options.
use_window_scroll: A sensor hook that tracks Window scroll position.
use_window_size: A sensor hook that tracks dimensions of the browser window.

Crate yew_hooks

Crate yew_hooks Copy item path

§Yew Hooks

§Examples

§Demo

Modules§

Structs§

Enums§

Functions§

Crate yew_hooks