Wrapping non-React NPM packages in custom-made JSX React Components?


I’m making an app with solo React front-end. Most of the times, I will find NPM packages of things I need (draggable, resizable, etc.) that are React components (which works great for me). But there are also times that there are no good React versions of what I’m seeking. For instance, I need a good lightbox component that is stable and has a few properties. But the React packages are all unreleased, unstable and have very scarce documentation and demos. So I have a problem with what I should be doing:

Obviously, there are some amazing non-React alternatives. Most of them include jQuery. But personally, I find it a bit counter intuitive to have some features be React components and the other then mixed in with plain JS.

This leads me to thinking that creating my own custom wrapper component for the package I select is a good idea. But then again, I might not write a great wrapper. And I will be constantly obliged to follow the packages I made wrappers for and make sure that my wrapper is up to date with the packages’ latest versions. Another thing is that those wrappers wouldn’t feel natural if they are a part of my project. I will most likely have to make my own packages and then have those included in the project.

However, this doesn’t seem quite scalable. (But then again, having React components for half of my features and plain JS mixed in that for the other half seems… incorrect) It does add comfort but that is at the cost of lots of time. Personally I would take this path, but I am still unsure that this is the best way to go about this. I’m currently a solo developer, so I need to go about this in a way that will be easy and intuitive to understand when other people come on board.