All Versions
12
Latest Version
Avg Release Cycle
127 days
Latest Release
1373 days ago

Changelog History
Page 1

  • v0.11.3 Changes

    July 21, 2020

    🍱 How embarrassing 🤦

    🚀 We were overzealous with the UNSAFE_ prefixes in the prior patch release. This change removes the prefix from componentDidUpdate

    Thanks to @trevdor for the PR!

  • v0.11.2 Changes

    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 Changes

    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 Changes

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

  • v0.10.0 Changes

    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 Changes

    May 10, 2017

    As title :D thanks @sammkj

  • v0.9.0 Changes

    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 Changes

    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 Changes

    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.