11# Building UIs With Svelte
22
3- This guide describes how to use the ` tinybase/ ui-svelte` module to build
4- reactive user interfaces in Svelte 5 applications.
3+ This guide describes how to use the ui-svelte module to build reactive user
4+ interfaces in Svelte 5 applications.
55
66## Reactive Functions
77
8- Every reactive function in the ` ui-svelte ` module returns a reactive object with
9- a ` current ` property. Any part of your template that reads it will automatically
8+ Every reactive function in the ui-svelte module returns a reactive object with a
9+ ` current ` property. Any part of your template that reads it will automatically
1010update when the underlying Store data changes.
1111
12- Here is the ` getCell ` function reading the color of a pet and displaying it in a
12+ Here is the getCell function reading the color of a pet and displaying it in a
1313paragraph:
1414
1515``` svelte
@@ -31,28 +31,31 @@ subscriptions, nor `$:` labels, nor `onDestroy` cleanup. The reactive object
3131registers and removes TinyBase listeners automatically using Svelte's reactivity
3232lifecycle.
3333
34- There are reactive functions corresponding to every Store reading method:
35-
36- - The getValues function is the reactive equivalent of the getValues method
37- - The getValueIds function is the reactive equivalent of the getValueIds method
38- - The getValue function is the reactive equivalent of the getValue method
39- - The getTables function is the reactive equivalent of the getTables method
40- - The getTableIds function is the reactive equivalent of the getTableIds method
41- - The getTable function is the reactive equivalent of the getTable method
42- - The getRowIds function is the reactive equivalent of the getRowIds method
43- - The getSortedRowIds function is the reactive equivalent of the getSortedRowIds
44- method
45- - The getRow function is the reactive equivalent of the getRow method
46- - The getCellIds function is the reactive equivalent of the getCellIds method
47- - The getCell function is the reactive equivalent of the getCell method
34+ There are reactive functions corresponding to every Store reading method. For
35+ example:
36+
37+ | TinyBase Store | Svelte Reactive Function |
38+ | ---------------------- | ------------------------ |
39+ | getValues method | getValues function |
40+ | getValueIds method | getValueIds function |
41+ | getValue method | getValue function |
42+ | getTables method | getTables function |
43+ | getTableIds method | getTableIds function |
44+ | getTable method | getTable function |
45+ | getRowIds method | getRowIds function |
46+ | getSortedRowIds method | getSortedRowIds function |
47+ | getRow method | getRow function |
48+ | getCellIds method | getCellIds function |
49+ | getCell method | getCell function |
4850
4951There are also reactive functions for the derived TinyBase data or objects.
5052Examples include the getMetric function, getSliceRowIds function, or
5153getResultTable function, and so on.
5254
5355Functions that access higher-level TinyBase objects - like the getStore
54- function, getMetrics function, and getQueries function - are different: they
55- return TinyBase objects directly from a Provider context.
56+ function, getMetrics function, and getQueries function - are different: rather
57+ than returning a reactive object, they return TinyBase objects directly from a
58+ Provider context.
5659
5760## Reactive Parameters With MaybeGetter
5861
0 commit comments