ctrlplusb / react-component-queries

Provide props to your React Components based on their Width and/or Height.
MIT License
183 stars 12 forks source link

Allow noPlaceholder configuration similar to react-sizeme #87

Closed oasisvali closed 7 years ago

oasisvali commented 7 years ago

The react-sizeme HOC accepts the noPlaceholder configuration which sends the sizing props through as null on first render rather than rendering a placeholder component. Since the use-case for react-component-queries is to deal with raw size values inside the query and pass a computed prop to the actual component, it makes sense to allow noPlaceholder in the config for componentQueries and the user can then perform the null case checking inside queries

Example usage would be:

componentQueries({
  queries: [
    function ({ width }) { 
        if (width === null) {
            return { mode: 'min' };
        }
        return (width > 800 ? { mode: 'max' } : { mode: 'min' });
    },
  ],
  config: {
    noPlaceholder: true,
  },
})(MyComponent)

If this seems like a valid addition, I can get a PR going :)

hoschi commented 7 years ago

Didn't see this :laughing: I created a PR here #88 There is also a branch with the updated build if you want to use this with npm.

ctrlplusb commented 7 years ago

Merged, and soon to be released. ❤️