UMD build so I won't have to use es6 and 'require'?

[kajmagnus]

Hi, I'm building my React.js app by concatenating a bunch of JS files, using gulp.concat(...); I don't use require .... What about creating an UMD build? Or something transpiled to ES5 that works directly in the browser without a module loader? Which is included in react-textarea-autocomplete's npm distribution?

Anyway this looks like a nice library, I like the demos.

[jukben]

Thanks for the feedback. Hmm... to be honest, why not! I will look into this. It would be nice if you could use this library even if you use the flow without a module loader. 👍

[jukben]

Hi @kajmagnus I've added umd build, so try it out and ⭐️ repo if you like it.

Example CodePen 💪

[kajmagnus]

Wow that was fast :-) I'm using it now, spent some of the night removing At.js, which I used before, and which works great, but it depends on jQuery.

React-Textarea-Autocomplete is only 60% the size of At.js, (minified gzipped) so I saved 4 kb :- ) And I'll be able to remove jQuery from my editor Javascript bundle, saving another 30 kb :- )

I found 4 things you might consider issues / bugs — I thought I'd mention them here, and if you think they look like interesting, I can open GitHub issues for them. I'd love to try to contribute fixes ... and I'm working 50h-60h / week with another project, not sure if I'll find time. (I'm using the autocomplete for that other project.)

They're: (in order of priority, from my perspective) 1) The only way to close the dropdown, is to click Esc? not clicking outside with the mouse? Could be a problem on mobile. 2) The dropdown always opens downwards, but sometimes, if the editor is at the bottom of the window, better open it upwards instead. 3) cursor: pointer on the items in the list. 4) (minor) If the user starts typing a @userna.. and the autocomplete starts loading names, but the request to the server takes long, and the user finishes typing the name him/herself — then, the "Loading..." box stays visible for an a bit annoyingly long time although the user is done typing the username.

[kajmagnus]

B.t.w. I'm using it with React 16.1, works fine thus far (I noticed the package.json depends on React 15.x).

[jukben]

Such a lovely feedback! I'm really glad that you found this library useful it mean's lot of for me!

First of all, I'll fix the peer dependency, because React 16 is supported too though. 👍

I like all the ideas!

1. That makes sense. I've basically copied GitHub functionality – there is no such a thing as a click outside for close the suggestion list. But I like the idea so far, so let's avoid breaking change and make it as the optional prop. 💪

2. That's really good feedback. I'd love to implement this. Could be handy and really bulletproof functionality.

3. That could be easily accomplished by setting your own CSS rule .rta__entity {...}. But good idea to set it as default. 👍

4. I don't understand to this point. Could you please elaborate more? As soon as the promise is resolved the Loading should be hidden there should be no delay at all.

I have an OSS weekend, so I will gladly take these 1-3 👍 But in the future I will be more then happy If you also want to contribute. What do you think about Readme it's sufficient?

[kajmagnus]

(to everyone else: This is off-topic :- ))

Ok :- ) I think the demo videeo in the readme is great. It clearly & concisely shows what this is.

Typo: this: "GitHub's like functionality" should be "GitHub like functionality"

Usually the Installation section seems to be where people mention the UMD build, look for example here: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom — if mentioned a bit further down (like it is now, for R.T.A.), some people might not notice (maybe they won't scroll down).

The UMD build is also available on unpkg: .. <script src="...."></script>.
You can find the library on window.ReactRouterDOM.

In the Props section, some props are bold — is that because they're required? Maybe clarify, or possibly add a "Required" column. https://github.com/webscopeio/react-textarea-autocomplete#props

I'd move this: "There is also UMD build available, check this CodePen for a proof" to a "Demo" section immediately below "Installation" (or above). Live code demos are very useful I think :- )

Actually, when I integrated R.T.A., I looked at the live demo. I didn't scroll down very far in the readme, or just skimmed it.

B.t.w. I have had the thought about a place where developers review each other's Readme files. Actually I've built a place called https://usability.testing.exchange, which I've been thinking about using for that. If you want to, you can submit your Readme to Usability Testing Exchange and I can ask someone named Bernard if he wants to have a look; he's a developer.

[kajmagnus]

About point 4: Not so important, maybe not worth fixing. But anyway, if it takes long before the promise gets resolved, because the sever is slow — then, when I continue typing, the "Loading..." box doesn't go away, although I've typed "@username and more other stuff afterwards" already. — But in reality, the server will "always" be fast & this won't happen :- )

[jukben]

I see! Very good point indeed, I will look on it also. 🙏 Thanks for the tips how to improve the Readme, I will look at it after, or you could send PR if you are willing – I agree with all points with you. Examples should be definitely moved to the beginning.

Anyway, in package JSON there is peerDeps: react>=15, but maybe it has to be more explicitly ^15.0.0 || ^16.0.0. Did you get some error about it?

If you talking about devDeps. I don't want to upgrade it because of enzyme tests, besides there is no benefit for me to do it right now.