@korajs/react 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -0
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# @korajs/react
|
|
2
|
+
|
|
3
|
+
React hooks and bindings for Kora.js. Reactive queries that update automatically, optimistic mutations, sync status tracking, and rich text editing support.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add korajs @korajs/react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Provider
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { KoraProvider } from '@korajs/react'
|
|
17
|
+
|
|
18
|
+
function App() {
|
|
19
|
+
return (
|
|
20
|
+
<KoraProvider app={app}>
|
|
21
|
+
<TodoList />
|
|
22
|
+
</KoraProvider>
|
|
23
|
+
)
|
|
24
|
+
}
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Reactive Queries
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { useQuery } from '@korajs/react'
|
|
31
|
+
|
|
32
|
+
function TodoList() {
|
|
33
|
+
const todos = useQuery(app.todos.where({ completed: false }).orderBy('createdAt'))
|
|
34
|
+
// Always up to date. No loading state needed for local data.
|
|
35
|
+
|
|
36
|
+
return todos.map((todo) => <TodoItem key={todo.id} todo={todo} />)
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Mutations
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import { useMutation } from '@korajs/react'
|
|
44
|
+
|
|
45
|
+
function AddTodo() {
|
|
46
|
+
const addTodo = useMutation(app.todos.insert)
|
|
47
|
+
|
|
48
|
+
return <button onClick={() => addTodo({ title: 'New todo' })}>Add</button>
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Sync Status
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
import { useSyncStatus } from '@korajs/react'
|
|
56
|
+
|
|
57
|
+
function SyncIndicator() {
|
|
58
|
+
const status = useSyncStatus()
|
|
59
|
+
// 'connected' | 'syncing' | 'synced' | 'offline' | 'error'
|
|
60
|
+
return <span>{status}</span>
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
All hooks use `useSyncExternalStore` for React 18+ concurrent mode safety.
|
|
65
|
+
|
|
66
|
+
## License
|
|
67
|
+
|
|
68
|
+
MIT
|
|
69
|
+
|
|
70
|
+
See the [full documentation](https://github.com/ehoneahobed/kora) for guides, API reference, and examples.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@korajs/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Kora.js React hooks and bindings for offline-first applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"yjs": "^13.6.30",
|
|
34
|
-
"@korajs/core": "0.1.
|
|
35
|
-
"@korajs/store": "0.1.
|
|
36
|
-
"@korajs/sync": "0.1.
|
|
34
|
+
"@korajs/core": "0.1.2",
|
|
35
|
+
"@korajs/store": "0.1.2",
|
|
36
|
+
"@korajs/sync": "0.1.2"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@testing-library/jest-dom": "^6.0.0",
|