Radium→Inlined CSS, react-modal, Webpack

Preface

With the upgrade to React 15.2.0, warnings are thrown whenever unrecognized props are given to DOM elements. Some users, myself included, were seeing warnings whenever developing (See #10). One of those warnings was for the portal component I had made, which has now been replaced (see react-modal note below). The other was for Radium (see Radium note below), which I was using for styling the component without requiring developers to include an external stylesheet.

react-modal (potential breaking changes)

I replaced Portal.js, my custom component to solve z-index issues, with the more complete react-modal component. This is the primary reason for bumping the version up to 3, as while the underlying ideas are the same as before (append children to the end of the document body, set z-index to 1000), I'm not confident enough in my knowledge of the workings of react-modal to say that the component will be displayed exactly as it was before. In my own projects, however, I have had no issues after the update. react-modal also comes with the (behavior-changing) benefit of confining the tab key targets to the modal contents.

Radium→Inlined CSS

Radium's developers are aware of the react warnings issue, but progress on the ticket was slow, and in the interest of more natural style handling and fewer dependencies, I decided to change back to CSS inlined via Webpack's style-loader.

Webpack

Webpack has some handy features like hot loading of react components and inlining CSS in code with style-loader, so I decided to abandon the gulp config I had been using.