react-burger-menu: open sourcing a React component

A while ago, I came across this example of animated sidebar transitions. Curious about how it was implemented, I looked at the source and saw it was using CSS transitions and just regular JavaScript DOM manipulation.

I thought it would be cool to package up something similar for React, to offer this kind of functionality but in a more usable format, so I created react-burger-menu.

I wanted it to have full test coverage, and obviously to use React, with ES2015 syntax and JSX, and be available on npm.

It turned out to be more popular than I expected! After a while, I started getting people filing issues and pull requests and requesting new features. It's the first project I've personally open sourced that has generated this kind of community interest, and maintaining something people are actually using has been a fun new experience. Thanks to the collaboration, the component has evolved quite a bit from where it started.

Features I've added include the ability to position the menu on the left or right, server-side rendering, more ways to customize the look and feel, the option to use a custom burger icon, and the option to supply styles entirely from JavaScript, instead of using this CSS classes I initially provided. More (not implemented at the time of writing) suggestions for the future are a custom cross icon, React Native support, and possibly a port to Angular 2.

One of the main things I've learned along the way is that people want as much control over design as possible. I figured colors and fonts would need to be customizable from the start, but didn't anticipate people wanting to change the size and position of the icons, width of the menu etc.

It's also been interesting having to make sure I'm using SemVer properly. If you have no users, breaking API changes aren't a big deal, but once you do, you have to think harder about this, as people's code is going to break and you'll make them sad if you cause this without warning.