All Versions
11
Latest Version
Avg Release Cycle
128 days
Latest Release
102 days ago

Changelog History
Page 1

  • v0.11.2

    April 03, 2020
    • Prefix legacy lifecycle methods with UNSAFE
    • ⚡️ Update scripts/watch/test.sh with paths for tsc and karma, so it works again
  • v0.11.1

    January 24, 2020

    🏗 This is some cleanup to get CircleCI build and tests running again after a bit of a hiatus.

    Also, cleaning up some links in the README to reflect that the project is now under its own org in github.

  • v0.11.0

    February 05, 2018
    • 🚚 Originated from discussion #66, lodash was removed and size reduce to 22kb minimized.
  • v0.10.0

    January 10, 2018
    • ⬆️ Upgraded all dependencies to latest at the time of writing.
    • 🛠 Fixed a bug that when using <ContainerQuery/> API, new query value is not honored.
  • v0.9.1

    May 10, 2017

    As title :D thanks @sammkj

  • v0.9.0

    March 06, 2017
    • ➕ Add a initialSize new props to compute the container query in the initial rendering (details please checkout README).
    • 👍 With initialSize we are now better supporting server side render (thanks to @jesstelford)!
    • A little behavior change on how query is computed. This should never affect you, but if you are interested, checkout please react-container-query/container-query-toolkit#2.
  • v0.8.1

    January 14, 2017
  • v0.8.0

    January 14, 2017

    Now below should work just like pre 0.7.x

    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);
    
  • v0.7.0

    October 31, 2016

    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.

  • v0.6.1

    October 30, 2016