ReasonML bindings for react-dropzone library
npm install bs-react-dropzone
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.
`reasonml
[@react.component]
let make = () => {
multiple=true
onDrop={(acceptedFiles, _) =>
Js.log(("these files were dropped", acceptedFiles))
}>
{({getInputProps, getRootProps}) => {
let inputProps = getInputProps();
let rootProps = getRootProps();
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}>
$3
The package provides fallback for projects using older version of JSX syntax.
reasonml
let component = ReasonReact.statelessComponent("Demo");let make = () => {
...component,
render: (_self) => {
multiple=true
onDrop={(acceptedFiles, _) =>
Js.log(("these files were dropped", acceptedFiles))
}>
...{({getInputProps, getRootProps}) => {
let inputProps = getInputProps();
let rootProps = getRootProps();
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}>
{"Drop files here" |> React.string}
onChange={inputProps.onChange}
onClick={inputProps.onClick}
ref={inputProps.ref}
style={inputProps.style}
tabIndex={inputProps.tabIndex}
type_={inputProps.type_}
multiple={inputProps.multiple}
/>
Hooks are not supported right now. There is an issue open for that. PRs are welcome!