ReasonML bindings for react-dropzone library.
npm i --save bs-react-dropzone react-dropzone
Then add bs-react-dropzone
as a dependency to bsconfig.json
.
[@react.component]
let make = () => {
<ReactDropzone
accept={ReactDropzone.Single("application/json")}
multiple=true
onDrop={(acceptedFiles, _) =>
Js.log(("these files were dropped", acceptedFiles))
}>
{({getInputProps, getRootProps}) => {
let inputProps = getInputProps();
let rootProps = getRootProps();
<div
onBlur={rootProps.onBlur}
onDragEnter={rootProps.onDragEnter}
onDragLeave={rootProps.onDragLeave}
onDragOver={rootProps.onDragOver}
onDragStart={rootProps.onDragStart}
onDrop={rootProps.onDrop}
onFocus={rootProps.onFocus}
onKeyDown={rootProps.onKeyDown}
ref={ReactDOMRe.Ref.callbackDomRef(rootProps.ref)}
tabIndex={rootProps.tabIndex}>
<div> {"Drop files here" |> React.string} </div>
<input
autoComplete={inputProps.autoComplete}
onChange={inputProps.onChange}
onClick={inputProps.onClick}
ref={ReactDOMRe.Ref.callbackDomRef(inputProps.ref)}
style={inputProps.style}
tabIndex={inputProps.tabIndex}
type_={inputProps.type_}
multiple={inputProps.multiple}
/>
</div>;
}}
</ReactDropzone>;
};
The package provides fallback for projects using older version of JSX syntax.
let component = ReasonReact.statelessComponent("Demo");
let make = () => {
...component,
render: (_self) => {
<ReactDropzone.Jsx2
accept={ReactDropzone.Single("application/json")}
multiple=true
onDrop={(acceptedFiles, _) =>
Js.log(("these files were dropped", acceptedFiles))
}>
...{({getInputProps, getRootProps}) => {
let inputProps = getInputProps();
let rootProps = getRootProps();
<div
onBlur={rootProps.onBlur}
onDragEnter={rootProps.onDragEnter}
onDragLeave={rootProps.onDragLeave}
onDragOver={rootProps.onDragOver}
onDragStart={rootProps.onDragStart}
onDrop={rootProps.onDrop}
onFocus={rootProps.onFocus}
onKeyDown={rootProps.onKeyDown}
ref={rootProps.ref}
tabIndex={rootProps.tabIndex}>
<div> {"Drop files here" |> React.string} </div>
<input
autoComplete={inputProps.autoComplete}
onChange={inputProps.onChange}
onClick={inputProps.onClick}
ref={inputProps.ref}
style={inputProps.style}
tabIndex={inputProps.tabIndex}
type_={inputProps.type_}
multiple={inputProps.multiple}
/>
</div>;
}}
</ReactDropzone.Jsx2>;
}
};
Hooks are not supported right now. There is an issue open for that. PRs are welcome!