Read my book

I wrote books about Webpack and React. Check them out!

Tuesday, February 10, 2015

Introducing Reactabular, react-pagify and react-ghfork

I've been doing React component development a while. This has been a good chance to update my skillset. In the process I've become even greater fan of Webpack.

One sign of this is that I've collaborated a bit with Christian Alfoni on a little cookbook about React and Webpack. You should check it out if either topic sounds interesting to you. Feedback on the content would be welcome.

Reactabular - Spectabular tables for React

I spent most of the time working on Reactabular. I know people have written table libraries for React already. I also came by a monster known as jQuery DataTables. You could describe my library as an antithesis of it. I aimed for a simple API that allows extension without having to hack the library itself. This is something I felt was lacking in many available solutions. I took some inspiration from them of course.

You can build a full-featured table with pagination, search, filtering and editing (inline, modal) using Reactabular. It will take a little bit of work but on the plus side, you get flexibility. If you are not happy with the default solutions, you can just swap them with something that suits your needs better.

The nice thing about Reactabular is that given it's so flexible, you can hook it with Flux architecture with little effort. I don't have an example available of this but it should be just a matter of replacing some setStates with something else.

react-pagify and react-ghfork

As it usually happens when you develop a component, you might end up doing a couple of others as a byproduct. In this case react-pagify and react-ghfork are such components.

react-pagify provides simple semantics for building a pagination control. I designed it to work with cases where you have a large amount of pages. Instead of generating a link for each I made it possible to define how many links to show at the beginning, the end and around the current page. There is some additional logic to deal with possible overlaps. Overall it's not the most complex project out there but then a pagifier doesn't have to be.

react-ghfork allows you to build those "Fork me at GitHub" banners without too much hassle. I built it on top of Simon Whitaker's definitions and simply provided a sane API for it.

Lessons Learned

Even if the projects don't sound earth-shattering, doing them was a good learning experience. I learned a good gh-pages flow (see project package.json) and learned to set up more complicated configurations using Webpack. It seems like a good pick for packaging React modules as it gives UMD output without too much hassle.

Other Releases - grunt-umd, libumd and pypandoc

Speaking of UMD, I pushed out new versions of grunt-umd and libumd out. Especially latter is handy if you need to deal with UMD transformation on tooling level. Both projects have reached a stable phase.

The same applies for pypandoc, a pandoc wrapper I maintain for Python. If you need to deal with document conversions, check it out.