bs-react-dropzone

bs-react-dropzone

ReasonML bindings for react-dropzone library.

Installation

npm i --save bs-react-dropzone react-dropzone

Then add bs-react-dropzone as a dependency to bsconfig.json.

Usage

[@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>;
};

JSX 2

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

Hooks are not supported right now. There is an issue open for that. PRs are welcome!

Changelog

0.6.0 (2020-09-02)

⚠ BREAKING CHANGES

• api: accept property uses polymorphic variants instead of regular one
• deps: the library is no longer compatible with JSX 2 syntax

Bug Fixes

• api: fix typings for accept property (5b53bf6)

• deps: get rid of JSX 2 (497c937)