React-window: Using within SVG

[jakub-chatrny]

Hey,

I need to virtualize vertically oriented SVG using FixedSizeList.

I've found the way to do it by setting innerElementType="svg" and using "rowRenderer" for rendering SVG elements. What I also need is render some content after those elements. I've tried to wrap whole list with svg and then set innerElementType and outerElementType to g but that didn't work.

I guess i might append some content using innerRef but it's really hacky way.

What I rather do is add prop innerElementAfterContent. Will be PR like that welcome?

[bvaughn]

No. I would not accept a PR that added a property like that.

You should be able to do what you're looking to do by setting innerElementType to be e.g. a function component that renders an SVG containing props.children and then whatever extra things you want afterward, though.

[jakub-chatrny]

Cool, didn't realized that innerElementType can be a component, thanks!

Final solution for others:

const SvgParentComponent = ({children, ...restProps}) => (
   <svg {...restProps}>
     {children}
     <text` x="0" y="15 fill="red">
      AppendedSvgNode
     </text>
   </svg>
);

const VirtualizedList = () => (
 <FixedSizeList
  ...
  innerElementType={SvgParentComponent}
 >
   {SvgLineRenderer}
 </FixedSizeList>
);

Edit: do not use innerElementType as inline function or HOC it will create new reference on each rerender which will remount whole sub-DOM (including list elements). If you need to pass data to this component use context api or connect it to redux.