Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Components with ReactJS

Responsive Components with ReactJS

David Badura

March 21, 2017
Tweet

More Decks by David Badura

Other Decks in Technology

Transcript

  1. 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; } }
  2. 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
  3. 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);
  4. 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 } });
  5. !!! WARNING !!! For information on risks and side-effects please

    read the documentaion and ask your doctor or pharmacist.
  6. 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)
  7. 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);