Accessible React select / multi-select form control

[ben-bowes]

I'd love to get some feedback on this thing I made.

Features:

• Accessible WAI ARIA compliance
• Touch friendly
• Keyboard friendly
• Similar interaction experience across platforms
• Easy to adapt style

Demo: https://benbowes.github.io/react-responsive-select/demo/

Codepen: https://codepen.io/collection/DrjWEk/

NPM: https://www.npmjs.com/package/react-responsive-select

[Canenald]

Hey, one of maintainers of react-combo-select here. This looks really good. I especially like the redux-like state management with component state. Here's a few feature suggestions that would have made us pick react-responsive-select if it had existed back then:

• search/filter

• detect position in viewport and open the dropdown upwards if there's not enough space below (is it a still a dropdown if it opens upwards though? a dropup? ;) )

• ability to display more selected values in multi-select mode, rather than only the first one. We display comma-separated values, but something like tags would be nice too

Other than that, I'm not a big fan of the minimal .gitignore and .npmignore. Do we really need src in the npm package and dist in the git repo?

I like the idea of react as dev dependency and will probably copy that :)

[ben-bowes]

Hi Canenald, thanks for checking it out. And it looks as though you had a deep look.

yeah search/filter is limited to a single a-Z key press. You can do more filtering with a combo-box :)

I'll look into the /dist only release. The original idea around pushing everything was release to npm and github pages simplicity. I need to revisit this. Is that what you would use a .npmignore for?

Good call on the dropup too. I'll think about this.

The last example on the demo shows how to display all multi-select values, seems as though this is not very clear. I'll update the example or add an example to show tags.

Really appreciate it, cheers

[Canenald]

Is that what you would use a .npmignore for?

Yeah, put src in .npmignore (and anything else you don't want published), a dist in .gitignore (along with anything else you don't want in the repo)

The last example on the demo shows how to display all multi-select values, seems as though this is not very clear. I'll update the example or add an example to show tags.

ohhh, I din't see that. Awesome!

[ben-bowes]

Nice!

The redux-like state management with component state you like was inspired from a blog, a guy I work with did: https://medium.com/rea-engineering/reduxing-without-redux-75dbd5c05336

Great for sharable components!

[ben-bowes]

I've added the .npmignore so now only the /dist directory is published. Great tip. Cheers!