Responsive Components with ReactJS

https://github.com/DavidBadura/react-responsive-components-slides

Transcript

1. with ReactJS <RESPONSIVE-COMPONENTS/>
2. DAVID BADURA Software Developer @ i22 Digitalagentur GmbH Loves ReactJS, Symfony & Simplicity
3. WHAT IS REACTJS?
4. SKIP PLEASE
5. WHAT WE WANT?
6. 1) ENCAPSULATED COMPONENTS
7. 2) RESPONSIVE LAYOUTS
8. WE WANT MORE Performance Simplicity Pizza ...
9. BUT FOCUS ON
10. WHAT WE HAVE?
11. MEDIA QUERY .image { height: 200px; } @media (min-width: 500px) { .image { width: 200px; float: left; } } @media (min-width: 600px) { .top .image { width: 200px; float: left; } .image { width: 280px; float: none; } }
15. ENCAPSULATED? not really
16. WHAT WE REALLY WANT?
17. ENCAPSULATED RESPONSIVE COMPONENTS
18. CONTAINER QUERY .image { height: 200px; } .item:media(min-width: 460px) { .image { width: 200px; float: left; } }
19. CONTAINER QUERY Container queries allow an author to control styling based on the size of a containing element rather than the size of the user ’s viewport. - Container Queries - Editor’s Draft, 5 June 2015
20. NO SUPPORT IN ANY BROWSER
22. MAGIC!
23. import React from "react"; import {applyContainerQuery} from "react-container-query" ; import classnames from 'classnames'; const query = { 'width-between-400-and-599' : { minWidth: 400, maxWidth: 599 }, 'width-larger-than-600' : { minWidth: 600, } }; export default applyContainerQuery(class extends React.Component { render() { return ( <div classNames={classnames(this.props.containerQuery)}> // ... </div> ); } }, query);
24. HOW? Never ask questions you don't want to known the answers to
25. import React from "react"; import {applyContainerQuery} from "react-container-query" ; import Slider from "./Slider"; import Grid from "./Grid"; export default applyContainerQuery(class Content extends React.Component { render() { return ( <div> {this.props.containerQuery.small ? <Slider data={this.props.data} /> : <Grid data={this.props.data} />} </div> ); } }, { 'small': { maxWidth: 599 } });
26. BUT HOW?
27. REACT-CONTAINER-QUERY Modular responsive component. With dependency on...
28. ELEMENT-RESIZE-DETECTOR Super-optimized cross-browser resize listener for elements.
29. !!! WARNING !!! For information on risks and side-effects please read the documentaion and ask your doctor or pharmacist.
31. BUT IT WORKS! And it's super fast!
32. THIS FEATURE IS COMING SOON ... in one or two years ... maybe ...
33. RESIZEOBSERVER ResizeObserver allows you to be notified when an element’s content rectangle has changed its size, and react accordingly. (ResizeObserver is in Chrome 54)
34. const ro = new ResizeObserver( entries => { for (let entry of entries) { const cr = entry.contentRect; console.log('Element:', entry.target); console.log(`Element size: ${cr.width}px x ${cr.height}px`); console.log(`Element padding: ${cr.top}px ; ${cr.left}px`); } }); // Observe one or multiple elements ro.observe(someElement);
35. QUESTIONS?
36. @DavidBadura
37. #bonn-devs https://slackinvite.me/to/bonn-devs
38. REFERENCES http://responsiveimagescg.github.io/container-queries https://tomhodgins.github.io/element-queries-spec/element-queries.html https://developers.google.com/web/updates/2016/10/resizeobserver https://www.sitepoint.com/responsive-web-components https://github.com/wnr/element-resize-detector https://github.com/d6u/react-container-query https://www.i22.de/
39. <THANKS!/>