« Changelog History


react-container-query v0.7.0 Release Notes

Release Date: 2016-10-31 // over 7 years ago

  • This is a breaking change in a way that it breaks everything we know about this library.

    If you don't know about the reason for this change, please read up #39 for the background. The new API should be able to resolve almost all the issues that are currently open.

    Migration Guide

    Before:

    class MyComponent extends Component { render() { return ( \<div className={classnames('container', this.props.containerQuery)}\> \<div className='box'\>the box\</div\> \</div\> ); } }const query = { 'width-between-400-and-599': { minWidth: 400, maxWidth: 599 }, 'width-larger-than-600': { minWidth: 600, } };const HigherOrderComponent = applyContainerQuery(MyComponent, query);

    After:

    const query = { 'width-between-400-and-599': { minWidth: 400, maxWidth: 599 }, 'width-larger-than-600': { minWidth: 600, } };class MyComponent extends Component { render() { return ( \<ContainerQuery className='container' query={query}\> \<div className='box'\>the box\</div\> \</ContainerQuery\> ); } }

    👉 Use MyComponent when you need it.

    📦 In above two examples, the generated HTML will look completed the same, yes, even the class names the container element, because ContainerQuery uses the classnames package internally by default.

    Benefits

    ⚡️ What's the point of a breaking change if there is no gain? By adopting this new API, react-container-query can work better the native ResizeObserver API that will available in the future. You can try this out in Chrome 55 Canary, behind the Experimental Web Platform flag. The future is closer.