React CSV Importer

Enterprise CSV data import widget

Visit Website
September 12, 2020 Published first alpha release on NPM

I have had this idea logged in one of my many Trello boards for a few years now, actually. I consult on React development for enterprise teams as my day job, so I get to see lots of recurring pain-points and usage scenarios. CSV file upload is one of those - it comes up in most enterprise apps, and even with tools like PapaParse and react-dropzone it takes a lot of effort to build a clean, error-free user experience, every time.

So, I decided to build a widget that has all the essential CSV data import functionality in one package: raw file preview, custom column mapping, import progress meter. All these features can be in a pure front-end library because modern browsers allow webpages to accept and parse local files without having to upload raw data to the server.

After two weeks of "hacking in the moonlight", I published react-csv-importer @ v0.0.1 on NPM. I also spent some time on making a demo GIF and writing up a most minimal API doc (actually just a code sample).

I wanted accessibility to not be a "feature for later", but a built-in requirement from day zero. It took a bit of head-scratching to adapt the drag-and-drop column mapping UI to screen-reader/keyboard-only interaction, but I am proud to say that this is shipping with the very first alpha version (possible bugs notwithstanding).

Now that the core package is up on NPM, I plan to keep rounding out the feature set and fixing bugs for v1 release. And of course to self-promote a bit meanwhile! The core software is MIT-licensed for open source use, but I am planning to release paid dual-licensed add-ons for teams that need "pro" features and theming. Even if there is no room for paid-tier functionality, I am happy to have released something out there.

Comment

About

Most enterprise web apps end up needing some kind of bulk CSV data upload. I couldn't find a React library that covered all the needed UX (preview, map columns, track progress), so I built this one!