@jtalton/observable-collections-hooks

Collections

Collections are designed to be an efficient way to manage collections of items.

Changes to a collection are emitted as events that other collections can listen and react to.

Instead of filtering, searching, sorting, and paging a whole array anytime there is a change, collections will only filter, search, sort, and page the changes. This makes collections much more efficient and scalable.

Collection Types

• Collection: A writeable collection that is used as the source for other collections.
• FilteredCollection: Used to filter a source collection.
• SearchedCollection: Used to search a source collection.
• SortedCollection: Used to sort a source collection.
• SelectedCollection: Used to manage the selected items of a source collection.
• PagedCollection: Used to page a source collection.

React Hooks

Collections bypass much of the react state management for efficiency. Only when something changes that affects the rendered state will the collections emit state change.

Collections have a set of react hooks for managing collections and state.

const [collection] = useState(() => new Collection(item => item.id))
const { selected, selectedCount } = useSelected(collection)
cosnt { filtered, filteredCount, setFilterFn } = useFiltered(collection)
cosnt { searched, searchedCount, search, setSearch } = useSearched(filtered)
const { sorted, sortedCount, setSortFn } = useSorted(searched)
const { paged, pagedCount, page, setPage, pageSize, setPageSize } = usePage(sorted, 1, 10)
const items = useItems(paged)

return (
    <table>
        {items.map(items => (
            <tr key={item.id}>
                {columns.map(cell=>(
                    <td>{cell}</td>
                ))}
            <tr>
        ))}
    </table>
)