Code duplication on using MediaQuery with components

[dcipher00]

On using media query with components we need to specify <MediaQuery maxDeviceWidth={***}> for small devices and <MediaQuery minDeviceWidth={****}> for large devices to distinguish between device width for example <MediaQuery maxDeviceWidth={464}> and <MediaQuery minDeviceWidth={1224}> to distinguish between device width of 464 and 1224

• One section displays if screen width is 464 or less.
• The other section displays if screen width is 1224 or more. What should we expect to happen if the screen width is 750? This also gives us redundant set of code to deal with. sometimes its not too bad as the cost is small - however on other times entire forms and form elements have to be duplicated. This means that any bug fixes/additions etc in the future need to be made in BOTH places.

[yocontra]

There are two alternative ways you can do this, either using render function children or hooks (both documented in the README).

If you have an alternative suggestion for an API let me know, otherwise will close this.