Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option for Dropzone without context (bring-your-own non-HTML5 context) #56

Merged
merged 10 commits into from
Dec 24, 2018

Conversation

smallfx
Copy link
Contributor

@smallfx smallfx commented Dec 22, 2018

I wanted to use this library (because react-dnd was interfering with react-dropzone) and it would have been perfect ... except I ran into an error with multiple HTML5Contexts :)

So this PR will allow someone to use their own global DragDropContext() via import { DropzoneWithoutContext }

Additionally, they (obviously) could use some other backend than HTML5Context if they need to for whatever reason.

Example

import * as React from 'react';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import { DropTarget, Target } from 'react-dnd-dropzone';

const HTML5DropContext = DragDropContext(HTML5Backend)(({ children }) => (
  <div>{children}</div>
));
const Dropzone = DropTarget(Target);

const App = () => (
  <HTML5DropContext>
    <Dropzone
      onDrop={files => console.log(files)}
      render={({ canDrop, isOver }) => (
        <div>
          <pre>{JSON.stringify({ canDrop, isOver }, null, 2)}</pre>
        </div>
      )}
    />
  </HTML5DropContext>
);

@evenchange4
Copy link
Owner

evenchange4 commented Dec 22, 2018

Netlify BOT

Built with commit d59c584

https://deploy-preview-56--react-dnd-dropzone.netlify.com

@codecov
Copy link

codecov bot commented Dec 22, 2018

Codecov Report

Merging #56 into master will not change coverage.
The diff coverage is 62.5%.

Impacted file tree graph

@@         Coverage Diff          @@
##           master   #56   +/-   ##
====================================
  Coverage      70%   70%           
====================================
  Files           1     3    +2     
  Lines          10    10           
  Branches        2     2           
====================================
  Hits            7     7           
  Misses          2     2           
  Partials        1     1
Impacted Files Coverage Δ
src/Target.js 100% <100%> (ø)
src/Dropzone.js 100% <100%> (+30%) ⬆️
src/DropTarget.js 40% <40%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 86fc79c...d59c584. Read the comment docs.

@evenchange4
Copy link
Owner

@smallfx Amazing! Thanks for the PR.

It is better to expose all the small pieces of components (Target & DragDropContext) so that consumers can compose their own Dropzone component.

@evenchange4 evenchange4 merged commit cba5223 into evenchange4:master Dec 24, 2018
@evenchange4
Copy link
Owner

Thanks! Released v1.1.3 with your changes. 🙌

@smallfx
Copy link
Contributor Author

smallfx commented Dec 24, 2018

@evenchange4 Awesome! Thanks for the help! 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants