[DOCS] Guide: Using Pixi UI x ScrollBox

[dimitrikochnev]

Hi guys,

Could you please provide an example of how to use ScrollBox (https://pixijs.io/ui/ScrollBox.html) with Pixi React?

Currently, I have the following:

const App = () => {
  const containerRef = useRef();

  return (
    <div ref={containerRef} className="h-full w-full">
      <Application
        className="h-full w-full"
        resizeTo={containerRef}
        resolution={window.devicePixelRatio}
        autoStart
        autoDensity
        sharedTicker
        antialias
      >
        <GridRenderer items={...} />
      </Application>
    </div>
  );
};

and

const GridRenderer = ({ items }) => {
  const { app } = useApplication();
  const scrollRef = useRef(null);
  const itemRefs = useRef([]);

  useEffect(() => {
    const box = scrollRef.current;
    box.removeItems();

    const refs = itemRefs.current;
    box.addItems(refs);

    box.resize(true);
  }, [items, app.screen.width, app.screen.height]);

  return (
    <pixiScrollBox
      ref={scrollRef}
      width={app.screen.width}
      height={app.screen.height}
      elementsMargin={1}
    >
      {items.map((props, i) => (
        <GridItem ref={el => { itemRefs.current[i] = el; }} key={i} {...props} />
      ))}
    </pixiScrollBox>
  );
};

So

1. I have to use useEffect to move items into the scrollable area, which feels a bit hacky and causes bugs, e.g. resizing makes the scroll position get lost, and adding new items resets it as well.

2. How can I resize the ScrollBox when the Application's dimensions change and preserve the current scroll position?

[thejustinwalsh]

I have yet to try the Pixi UI elements personally, however looking at the docs for ScrollBox I would anticipate the code for GridRenderer to look something like this...

const GridRenderer = ({ items }) => {
  const { app } = useApplication();
  const scrollRef = useRef(null);

  return (
    <pixiScrollBox
      ref={scrollRef}
      width={app.screen.width}
      height={app.screen.height}
      elementsMargin={1}
      items={items}
   / >
  );
};

The code you have above is adding the items directly to the ScrollBox container's children, and ScrollBox is not overriding the default behavior of addChild. From what I can gather Scrollbox expects you to use the items option for initializing the list.

As you have allready identified, adding and removing the items via an effect when resizing the element is going to loose the scroll position.

Regarding resizing, the width and hight are exposed as setters on ScrollBox and when the component re-renders, it should use the width and height of the screen and resize. The tricky part may simply be triggering the re-render, as the useApplication hook is not enough to trigger a re-render when the screen size changes.

const GridRenderer = ({ items }) => {
  const { app } = useApplication();
  const scrollRef = useRef(null);
  const [{width, height}, setSize] = useState({
     width: app.screen.width,
     height: app.screen.height,
   });

  useEffect(() => {
    const handleResize = () => setSize({width: app.screen.width, height: app.screen.height});
    app.renderer.on('resize', handleResize);
    return () => {
      app.renderer.off('resize', handleResize);
    };
  }, [app]);

  return (
    <pixiScrollBox
      ref={scrollRef}
      width={width}
      height={height}
      elementsMargin={1}
      items={items}
   / >
  );
};

If you find you need to reflow your entire scene when resizing, you may want to handle the resize events at the root of your application and then let react re-render all the children on resize instead.

If your items are react components instead of Pixi classes that extend Container I don't currently have a solution that is top of mind.

Please make a quick sample in codesandbox or stackblitz illustrating the problem, and I would be happy to take a look.

[dimitrikochnev]

Hi @thejustinwalsh,

Thank you for the response

If your items are react components instead of Pixi classes that extend Container I don't currently have a solution that is top of mind.

Yes, that’s exactly the issue. I want to render React components, since grids and lists usually involve many events, complex logic, and layouts - I don’t want to lose React's context.

Right now I’ve found a solution: render a Pixi App inside a scrollable div and synchronize its scroll view with Pixi's Y offset.

Should I close this issue? It’s still unclear how to bind Pixi UI/Pixi React’s ScrollBox in a simple way while preserving React’s rendering down to the items.

[thejustinwalsh]

@trezy i believe we need to support react-three-fiber’s unified attach to solve this problem. I don’t see an issue tracking the attach feature just yet, and supporting this library would require it.