Virtualizer useStaticVirtualizerMeasure - sydsutton/FS.FluentUI GitHub Wiki

[<ReactComponent>]
let VirtualizerTest() =
    let vm = Fui.useStaticVirtualizerMeasure [
        virtualizerMeasureProps.defaultItemSize 100
    ]

    let (vLength, bufferItems, bufferSize, scrollRef) = vm.virtualizerLength, vm.bufferItems, vm.bufferSize, vm.scrollRef

    Html.div [
        prop.ariaLabel "Virtualizer Example"
        prop.role "list"
        prop.ref scrollRef
        prop.style [
            style.display.flex
            style.flexDirection.column
            style.overflowY.auto
            style.width 500
            style.height (length.percent 100)
            style.maxHeight 750
        ]
        prop.children [
            Fui.virtualizer [
                virtualizer.numItems 1000
                virtualizer.virtualizerLength vLength
                virtualizer.bufferItems bufferItems
                virtualizer.bufferSize bufferSize
                virtualizer.before (
                    Fui.icon.bedFilled []
                )
                virtualizer.after (
                    Fui.icon.bedRegular []
                )
                virtualizer.itemSize 100
                virtualizer.children (fun index _ ->
                    Html.span [
                        prop.role "listitem"
                        prop.ariaPosInSet index
                        prop.ariaSetSize 1000
                        prop.style [
                            style.height 100
                            style.lineHeight 100
                            style.width (length.percent 100)
                        ]
                        prop.key $"test-virtualizer-child-{index}"
                        prop.children [
                            Fui.text $"Node-{index}"
                        ]
                    ]
                )
            ]
        ]
    ]