Allow applyContainerQuery to work as a curried function

[Pajn]

Most higher order components allows you to partially apply the options before applying the component, for example recompose, react-redux, react-apollo. This allows you to compose multiple higher order compose like this

export const enhance = compose(
  mapProps(({config}) => ({
    config,
    deviceId: config.deviceId,
    interfaceIds,
  })),
  graphql(gql`
    query($deviceId: String!, $interfaceIds: [String!]) {
      device(id: $deviceId) {
        id
        name
        interfaceIds
        status(interfaceIds: $interfaceIds) {
          id
          interfaceId
          statusId
          value
        }
      }
    }
  `),
  mapProps(props => ({
    ...props,
    status: props.data.device && asObject(props.data.device.status),
  })),
)

It would be nice if this library supported the same pattern

[d6u]

Thanks for your contribution. I'm on my family vacation now. Will look at this when I come back.

Best, Daiwei

On Jun 11, 2017, 5:50 PM +0800, Rasmus Eneman notifications@github.com, wrote:

Most higher order components allows you to partially apply the options before applying the component, for example recompose, react-redux, react-apollo. This allows you to compose multiple higher order compose like this export const enhance = compose( mapProps(({config}) => ({ config, deviceId: config.deviceId, interfaceIds, })), graphql(gql query($deviceId: String!, $interfaceIds: [String!]) { device(id: $deviceId) { id name interfaceIds status(interfaceIds: $interfaceIds) { id interfaceId statusId value } } } ), mapProps(props => ({ ...props, status: props.data.device && asObject(props.data.device.status), })), ) It would be nice if this library supported the same pattern — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[d6u]

That's a good idea. We have to figure out a way to order the arguments, so they become useful. Might be tricky because we have an optional initialSize argument.

[drewlustro]

+1 on this... the style of applyContainerQuery is not compliant with best-practices design of HoC's. The signature should be something like:

applyContainerQuery(query) => (BaseComponent) => { ... containerQuery props decorated .... }

That way, this module could be used with recompose

[d6u]

My original thought on this is that I agree curried function is useful and popular, but I want to leave this choice to user. You can easily use Ramda or similar library to create your own curried version of applyContainerQuery, although it's likely to increase the bundle size a couple kb.

[GeKorm]

This is solved by using your own HOC over <ContainerQuery />, like this:

const customContainerQuery = (query) => (Component) => (props) => (
  <ContainerQuery query={query}>
    {(params) => <Component containerQuery={params} {...props} />}
  </ContainerQuery>
);

// Usage:
customContainerQuery(query)(MyComponent)

Works with recompose.

[drewlustro]

Dope, thanks.

On Wed, Dec 20, 2017 at 5:43 AM, George Kormaris notifications@github.com wrote:

This is solved by using your own HOC over , like this:

const customContainerQuery = (query) => (Component) => (props) => (

{(params) => }

); // Usage:customContainerQuery(query)(MyComponent)

Works with recompose.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/d6u/react-container-query/issues/60#issuecomment-353029431, or mute the thread https://github.com/notifications/unsubscribe-auth/AAL5RQAb98FKxqzIJByKKzIB3XcdeNFYks5tCOTogaJpZM4N2WKM .