Expose a Function Outside of Component

@solid-primitives/virtual

@solid-primitives/virtual

@solid-primitives/virtual

@solid-primitives/virtual, namely support for dynamic item sizes and fixes to broken reactivity.

I implemented a

scrollToItem

scrollToItem

scrollToItem

scrollToItem utility function that is now returned from

createVirtualList

createVirtualList

createVirtualList

createVirtualList. This works perfectly fine if you are just using the headless virtual list.

However, there is a

VirtualList

VirtualList

VirtualList

VirtualList component that abstracts away the HTML boilerplate required for

createVirtualList

createVirtualList

createVirtualList

createVirtualList to function. For convenience, I would like to expose the

scrollToItem

scrollToItem

scrollToItem

scrollToItem function for use outside of

VirtualList

VirtualList

VirtualList

VirtualList. Problem is, I have yet to find an idiomatic way to accomplish this after searching around for a bit.

Here's an extremely hacky solution I came up with that I'm not so proud of and would like to replace before I submit the PR for review:

Internals:

type VirtualListProps<T extends readonly any[], U extends JSX.Element> = {
    // ...
    setScrollToItem: (scrollToItem: (itemIndex: number) => void) => void;
};

// Inside `VirtualList`
let scrollContainer!: HTMLDivElement; // Attached Ref
props.setScrollToItem((itemIndex: number) => scrollToItem(itemIndex, scrollContainer));

type VirtualListProps<T extends readonly any[], U extends JSX.Element> = {
    // ...
    setScrollToItem: (scrollToItem: (itemIndex: number) => void) => void;
};

// Inside `VirtualList`
let scrollContainer!: HTMLDivElement; // Attached Ref
props.setScrollToItem((itemIndex: number) => scrollToItem(itemIndex, scrollContainer));

type VirtualListProps<T extends readonly any[], U extends JSX.Element> = {
    // ...
    setScrollToItem: (scrollToItem: (itemIndex: number) => void) => void;
};

// Inside `VirtualList`
let scrollContainer!: HTMLDivElement; // Attached Ref
props.setScrollToItem((itemIndex: number) => scrollToItem(itemIndex, scrollContainer));

type VirtualListProps<T extends readonly any[], U extends JSX.Element> = {
    // ...
    setScrollToItem: (scrollToItem: (itemIndex: number) => void) => void;
};

// Inside `VirtualList`
let scrollContainer!: HTMLDivElement; // Attached Ref
props.setScrollToItem((itemIndex: number) => scrollToItem(itemIndex, scrollContainer));

In Use:

let scrollToItem!: (itemIndex: number) => void;
// ...
<VirtualList
    // ...
    setScrollToItem={fn => (scrollToItem = fn)}
    // ...
>
{/* ... */}
</VirtualList>

let scrollToItem!: (itemIndex: number) => void;
// ...
<VirtualList
    // ...
    setScrollToItem={fn => (scrollToItem = fn)}
    // ...
>
{/* ... */}
</VirtualList>

let scrollToItem!: (itemIndex: number) => void;
// ...
<VirtualList
    // ...
    setScrollToItem={fn => (scrollToItem = fn)}
    // ...
>
{/* ... */}
</VirtualList>

let scrollToItem!: (itemIndex: number) => void;
// ...
<VirtualList
    // ...
    setScrollToItem={fn => (scrollToItem = fn)}
    // ...
>
{/* ... */}
</VirtualList>

I would really appreciate if anyone could help me replace this with something idiomatic, thanks!

GitHub

`virtual` Improvements (Dynamic Item Sizes, Fix Broken Reactivity) ...

This adds support for dynamic item sizes in the virtual package.
This is accomplished by adding | (row: T[number], index: number) =&gt; number) to the rowHeight parameter, and type-checking for...

Expose a Function Outside of Component

Similar Threads

Similar Threads

Similar Threads