use_drop_zone

Create a zone where files can be dropped.

Demo

Usage

use leptos::prelude::*;
use leptos::html::Div;
use leptos_use::{use_drop_zone_with_options, UseDropZoneOptions, UseDropZoneReturn};

#[component]
fn Demo() -> impl IntoView {
let drop_zone_el = NodeRef::<Div>::new();

let on_drop = |event| {
    // called when files are dropped on zone
};

let UseDropZoneReturn {
    is_over_drop_zone,
    ..
} = use_drop_zone_with_options(
    drop_zone_el,
    UseDropZoneOptions::default().on_drop(on_drop)
);

view! {
    <div node_ref=drop_zone_el>
        "Drop files here"
    </div>
}
}

Server-Side Rendering

Make sure you follow the instructions in Server-Side Rendering.

On the server the returned file signal always contains an empty Vec and is_over_drop_zone contains always false

Feature

This function is only available if the crate feature use_drop_zone is enabled

Types

• struct UseDropZoneOptions
• struct UseDropZoneEvent
• struct UseDropZoneReturn

Source

Source • Demo • Docs