Combining with react-window-infinite-loader

[zorzysty]

Is there a way to combine it with react-window-infinite-loader?
The problem I see here is that both InfiniteLoader and ReactWindowScroller provide their own refs to be passed to the List element.

[thexpand]

It might be related to this issue #2

[PiotrFidurski]

You can use react-window-infinite-loader by using custom mergeRefs function:

function mergeRefs(...refs) {
  return (ref) =>
    refs.forEach((possibleRef) => (possibleRef.current = ref));
}

usage: 

<VariableSizeList ref={mergeRefs(...[ref, anotherRef])} {...props} />

[daanishnasir]

@zorzysty @PiotrFidurski do you have a example/codesandbox of this? Can't seem to make it work either with infinite -loader

[khurshidrpvv]

type of ReactWindowScroller ref is Ref<FixedSizeList>
type of InfiniteLoader ref is ref: (ref: any) => void

since InfiniteLoader ref is a function so simply assigning it to the current property of merged ref won't work, we need slight modification in merge function

function setRef(val, ...refs) {
  refs.forEach((ref) => {
    if (typeof ref === 'function') {
      ref(val);
    } else if (ref != null) {
      ref.current = val;
    }
  });
}

function mergeRefs(...refs){
  return (val) => {
    setRef(val, ...refs);
  };
}

original answer with typescript version and example usage here