5 Tips for Finding Amazing React Components

Sharing is Caring

One of the most important parts of building scaleable systems quickly is to find work that others have done and use it as part of our system. Using packages others built and assembling it with your business rules and logic is a lot like putting together pieces of Lego but following your instructions.

One of my favourite parts of React is that there’s usually hundreds of small open source components that can be used and usually easily modified to suit my needs. For example, there’s dozens of really well done date/time pickers that usually require no effort to put into place.

Things to Watch For When Evaluating Open Source Libraries/Packages

There’s a bunch of things that you should make you check before deciding to add a library to your project. If your project has the potential to be put in place and basically not have much maintenance going on – ie it’s an enterprise system, make sure you follow these tips.

License Needs to Pretty Permissive

As a developer, it almost feels crazy to mention the license first but it’s something that you need to really check. Choosing the wrong license can expose your company to a lot of legal trouble. I am definitely not a lawyer, but I always google the License value in the package.json and try to make a judgement call.

Reputation

Does the project have a lot of stars on GitHub? Does NPM report that there’s a lot of installs in the last month? I don’t generally even try to use anything that doesn’t have at least 500 installs in the last month. Often no stars and minimal installs in the last month means the project is dead or is dying.

Still Maintained

Review the project’s commit history on GitHub and make sure there’s commits that have been done recently. I usually look for at least something in the last 2 or 3 months, and ideally that there’s multiple people working on the project.

Community Support

Is there a mailing list archive? Are issues being answered on Github promptly? I would definitely consider avoiding anything that will be core to your project if there is very little community support.

Make Sure it Supports the Version of React You Are Using

Before you download do a quick search of the issues for your particular version of React and see if there’s any complaints about it not supporting it. It can be very frustrating installing something and seeing it fail due to unmet dependency.

Tips for Finding Good React Packages

I strongly recommend taking your time and really evaluating the things I mentioned in the evaluation section. The newest, and most sexy library may not actually be what you want for your project. Getting mentioned on hundreds of blogs, and having thousands of stars doesn’t mean that it’s always the right choice. Node.js is wicked popular, and is really useful for a lot of different usecases but there’s times where it’s not the right choice. For example, Node isn’t necessarily the right choice for machine learning problems.

Take Your Time

Take the time and evaluate each library you are considering. Don’t be scared to take half an hour and build an example app or play around with the public demos. If you’re building something that should be responsive, make sure to test it on your phone.

Worry About File Size

Choosing libraries and components that are large can have a huge impact on the size of the bundle that’s produced by webpack or whatever other bundling software you are using. I try to avoid packages that include a lot of images and a lot of other dependencies unless I can do some tree shaking.

Avoid Dependency Problems

Dependency problems are a nightmare in software development because they can cause things not to build correctly, tests not to run, etc. I’ve spent many long hours resolving dependency problems especially when software had to be installed on a user’s machine or device. Although the problem is lessened a bit by the web, it still can be a huge issue.

Search the Internet

There’s a lot of resources out there for finding open source components and libraries. I usually just start with a simple a google search. I usually find when I need or want very quickly and rarely need to spend much more time looking. DevArchy has a really good list of “Awesome React Components” on Github.

Ask Your Network for Help

Asking your network for help can definitely be a good starting point to finding a library – it might also be a matter of you using the wrong search time when looking.

Sharing is Caring

Brian is a software architect and technology leader living in Niagara Falls with 13+ years of development experience. He is passionate about automation, business process re-engineering, and building a better tomorrow.

Brian is a proud father of four: two boys, and two girls and has been happily married to Crystal for more than ten years. From time to time, Brian may post about his faith, his family, and definitely about technology.