Crate yew_hooks

Source
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§

Structs§

Enums§

Functions§

  • This hook returns state and a run callback for an async future.
  • This hook returns state and a run callback for an async future with options. See use_async too.
  • A side-effect hook that shows browser alert when user try to reload or close the page.
  • This hook is a simplified use_toggle to manage boolean toggle state in a function component.
  • A hook that triggers a callback when user clicks outside the target element.
  • 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.
  • This hook is used to manage counter state in a function component.
  • A hook that delays invoking a function until after wait milliseconds have elapsed since the last time the debounced function was invoked.
  • A hook that delays calling effect callback until after wait milliseconds have elapsed since the last time effect callback was called.
  • This hook is similar to use_debounce_effect but it accepts dependencies.
  • A hook that delays updating state until after wait milliseconds have elapsed since the last time state was updated.
  • A state hook that returns the default value when state is None.
  • This hook tracks file, link and copy-paste drags.
  • This hook tracks file, link and copy-paste drags. use_drag hook with options.
  • This hook tracks file, link and copy-paste drops.
  • This hook tracks file, link and copy-paste drops. use_drop hook with options.
  • A lifecycle hook that runs an effect only once.
  • This hook ignores the first invocation (e.g. on mount). The signature is exactly the same as the use_effect hook.
  • This hook is similar to use_effect_update but it accepts dependencies. The signature is exactly the same as the use_effect_with hook.
  • A hook that subscribes a callback to events.
  • A hook that subscribes a callback to events only for window. If you want to specify an event target, use use_event.
  • A side-effect hook that sets favicon of the page.
  • A sensor hook that tracks user’s geographic location.
  • A sensor hook that tracks user’s geographic location. See use_geolocation
  • A sensor hook that tracks brower’s location hash value.
  • A sensor hook that tracks whether HTML element is being hovered.
  • A sensor hook that tracks infinite scrolling of the element.
  • A hook that schedules an interval to invoke callback every millis milliseconds. The interval will be cancelled if millis is set to 0.
  • A hook returns true if component is just mounted (on first render) and false otherwise.
  • A hook returns true if component is mounted and false otherwise.
  • This hook returns the latest immutable ref to state or props.
  • A hook that tracks a list and provides methods to modify it.
  • A side-effect hook that manages a single localStorage key.
  • A sensor hook that tracks brower’s location value.
  • This hook logs in console as component goes through life-cycles.
  • 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.
  • A hook that tracks a hash map and provides methods to modify it.
  • A sensor hook that tracks an HTML element’s dimensions using the ResizeObserver API.
  • This hook plays video or audio and exposes its controls.
  • This hook plays video or audio and exposes its controls with options. see use_media
  • A lifecycle hook that calls a function after the component is mounted.
  • This hook returns the latest mutable ref to state or props.
  • This hook returns the previous immutable ref to state or props.
  • A hook that tracks a queue and provides methods to modify it.
  • 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.
  • A state hook that only updates state in the callback of requestAnimationFrame.
  • A hook that counts component renders.
  • A sensor hook that tracks an HTML element’s scroll position.
  • A sensor hook that tracks whether HTML element is scrolling.
  • A sensor hook that tracks brower’s location search param value.
  • A side-effect hook that manages a single sessionStorage key.
  • A hook that tracks a hash set and provides methods to modify it.
  • A sensor hook that tracks an HTML element’s dimensions using the ResizeObserver API.
  • Similar to use_state_eq, but check if the two Rcs of values point to the same allocation, instead of PartialEq of the values.
  • A sensor hook that detects swipe based on TouchEvent.
  • A sensor hook that detects swipe based on TouchEvent with options. If you want to detect for window, pass NodeRef::default() to param node.
  • A sensor hook that detects swipe based on TouchEvent for window. See use_swipe.
  • A hook that throttles invoking a function, the function is only executed once every millis.
  • A hook that throttles calling effect callback, it is only called once every millis.
  • This hook is similar to use_throttle_effect but it accepts dependencies.
  • A hook that throttles updating state, the state is only updated once every millis.
  • 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.
  • A side-effect hook that sets title of the page and restore previous title when unmount.
  • This hook is used to manage toggle state in a function component.
  • A lifecycle hook that calls a function when the component will unmount.
  • A hook returns a function that forces component to re-render when called.
  • 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.
  • This hook communicates with WebSocket.
  • This hook communicates with WebSocket with options.
  • A sensor hook that tracks Window scroll position.
  • A sensor hook that tracks dimensions of the browser window.