search

KarimMokhtar / react-drag-drop-files

Light and simple Reactjs drag and drop files library to use with very flexible options to change, so you put whatever the design you want for your drop-area. Users can drag and drop or even select the file anywhere in the window.
MIT License
248 stars 91 forks source link

Need method to disable `hoverTitle` #39

Closed TroyWolf closed 2 years ago

TroyWolf commented 2 years ago

Version: 2.3.2

By default, when user drags file over drop zone, "Drop here" text appears. This is controlled with the hoverTitle property. For our use case, we want to disable this hover text completely. However, the hoverTitle does not seem to provide a way to disable this completely. Setting a blank string (''), null, or false all result in the default "Drop here" text showing. I can set to a single space hoverTitle=' ', but this still results in a gray dot showing upon hover.

Thanks @KarimMokhtar, for creating and sharing your work!

KarimMokhtar commented 2 years ago

Hello @TroyWolf , First of all, let me thank you so much for your contribution. Unfortunately, the library is made to be flexible regarding the design so it's not efficient to put a property for every single line on the code. Solution: So that's why you can path a "children" React node with your preferred design and it will override the default one on the code. Thanks again.

TroyWolf commented 2 years ago

Thanks, @KarimMokhtar. We ended up doing exactly that--the children approach. On a side note, your FileUploader component might be better named FileSelector since it is all about selecting a file or files--leaving the work of uploading the file to other code. ☕

KarimMokhtar commented 2 years ago

@TroyWolf It's great to hear you solved it. Yes but i partially agree with you here we tried to select a more generic name since "selecting" is part of the uploading. Thank you so much for your suggestion and looking forward to your coding contribution on the library :)

nostalgiaforinfinity commented 2 years ago

@KarimMokhtar Maybe I'm misunderstanding, but looking at the code it doesn't seem like it is possible to disable the hoverTitle even if we're supplying children, i.e. the HoverTitle component will always be rendered.

Screenshot from 2022-04-04 13-40-01

Would you accept a PR for a disableHoverTitle property? Or is there a way to removing it using children that I haven't figured out?