use_drop_zone
Create a zone where files can be dropped.
Demo
Usage
use leptos::prelude::*;
use leptos::html::Div;
use leptos_use_drop_zone::{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
Installation
cargo add leptos-use-drop-zone
Options
UseDropZoneOptions
Options for use_drop_zone_with_options.
Every option is set with a builder method of the same name, e.g. UseDropZoneOptions::default().on_drop(...). See also the API docs.
on_drop
Type: Arc<dyn Fn(UseDropZoneEvent) + Send + Sync>
Event handler for the drop event
on_enter
Type: Arc<dyn Fn(UseDropZoneEvent) + Send + Sync>
Event handler for the dragenter event
on_leave
Type: Arc<dyn Fn(UseDropZoneEvent) + Send + Sync>
Event handler for the dragleave event
on_over
Type: Arc<dyn Fn(UseDropZoneEvent) + Send + Sync>
Event handler for the dragover event