leptos-use

leptos-use is a collection of essential utilities for the Leptos framework, inspired by popular libraries like react-use, vueuse, and solidjs-use. It provides a wide range of composable functions (over 90 available) to simplify common tasks in Leptos applications, such as managing browser APIs, handling signals, and managing side effects.

Key features include:

• A large collection of utility functions (90+).
• Support for Server-Side Rendering (SSR).
• Designed to work seamlessly with Leptos signals and reactivity.

Several functions in leptos-use use codecs from the codee crate to encode and decode data for storage or network transmission. Codecs implement the Encoder trait (via the encode method) and the Decoder trait (via the decode method).

There are two primary categories of codecs:

1. Binary Codecs: Encode data as Vec<u8>.
2. String Codecs: Encode data as String.

If you have a binary codec but need to use it in a context that requires strings (such as cookies), you can use the Base64 adapter to wrap the binary codec and represent the data as a base64 string.

Many functions in leptos-use provide an alternative version suffixed with _with_options (e.g., use_css_var_with_options). These versions allow you to pass a configuration struct to customize the behavior of the hook beyond its standard arguments.

To use them:

1. Identify the _with_options version of the function you need.
2. Locate the corresponding options struct, which follows a PascalCase naming convention (e.g., use_css_var_with_options uses UseCssVarOptions).
3. Use the builder pattern to configure only the specific fields you wish to change, starting from Default::default().

let (color, set_color) = use_css_var_with_options(
    "--color",
    UseCssVarOptions::default()
        .target(el)
        .initial_value("#eee"),
);

To run the use_webtransport example, you need to install Trunk, Tailwind CSS, and the Rust nightly toolchain with the wasm32-unknown-unknown target.

Follow these steps:

1. Install dependencies:

   • Install trunk via cargo.
   • Install tailwindcss and @tailwindcss/forms via npm.
   • Install the Rust nightly toolchain and the wasm32-unknown-unknown target via rustup.

2. Run the development servers:

   • Open a terminal and start the Tailwind CSS watcher to compile styles.
   • Open a second terminal and start the Trunk development server.

# Install dependencies
cargo install trunk
npm install -D tailwindcss @tailwindcss/forms
rustup toolchain install nightly
rustup target add wasm32-unknown-unknown

# Terminal 1: Watch Tailwind CSS
npx tailwindcss -i ./input.css -o ./style/output.css --watch

# Terminal 2: Serve the application
trunk serve --open

After setting up the environment, you must run two processes simultaneously in separate terminals to handle CSS compilation and the WASM development server.

1. Terminal 1: Start the Tailwind CSS watcher to compile styles.
2. Terminal 2: Start the Trunk development server to serve the application.

Execution Steps

In Terminal 1:

npx tailwindcss -i ./input.css -o ./style/output.css --watch

In Terminal 2:

trunk serve --open

The example requires two concurrent processes: one to watch and compile Tailwind CSS styles, and another to serve the Leptos application via Trunk.

1. Start the Tailwind CSS watcher in one terminal: npx tailwindcss -i ./input.css -o ./style/output.css --watch

2. Start the Trunk development server in a second terminal: trunk serve --open

To run the use_raf_fn example, you need to install the Rust nightly toolchain, the wasm32-unknown-unknown target, Trunk for development serving, and Tailwind CSS for styling.

Prerequisites

Install the necessary system tools:

# Install Trunk for WASM development
cargo install trunk

# Install Tailwind CSS and its forms plugin
npm install -D tailwindcss @tailwindcss/forms

# Install Rust nightly toolchain and the WASM target
rustup toolchain install nightly
rustup target add wasm32-unknown-unknown

To run the use_throttle_fn example, you must first ensure you have the Rust nightly toolchain and the wasm32-unknown-unknown target installed, along with the trunk build tool. Once the environment is set up, use trunk serve --open to compile the project and launch the demo in your browser.

# Install dependencies
cargo install trunk
rustup toolchain install nightly
rustup target add wasm32-unknown-unknown

# Run the demo
trunk serve --open

If existing codecs do not meet your requirements, you can implement your own by following these patterns:

• For String Codecs: Refer to the implementation of JsonSerdeCodec in the codee crate.
• For Binary Codecs: Refer to the implementation of BincodeSerdeCodec in the codee crate.