@growae/reactive-react 0.0.2 → 0.0.3
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/CHANGELOG.md +8 -0
- package/README.md +92 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
package/README.md
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<h1 align="center">@growae/reactive-react</h1>
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
React hooks for building Aeternity dApps
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://www.npmjs.com/package/@growae/reactive-react"><img src="https://img.shields.io/npm/v/@growae/reactive-react?colorA=21262d&colorB=3b82f6&style=flat" alt="Version"></a>
|
|
9
|
+
<a href="https://www.npmjs.com/package/@growae/reactive-react"><img src="https://img.shields.io/npm/dm/@growae/reactive-react?colorA=21262d&colorB=3b82f6&style=flat" alt="Downloads"></a>
|
|
10
|
+
<a href="https://github.com/growae/reactive/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@growae/reactive-react?colorA=21262d&colorB=3b82f6&style=flat" alt="MIT License"></a>
|
|
11
|
+
</p>
|
|
12
|
+
|
|
13
|
+
<br>
|
|
14
|
+
|
|
15
|
+
## Overview
|
|
16
|
+
|
|
17
|
+
React adapter for `@growae/reactive`. Built on TanStack React Query, it provides `ReactiveProvider` and hooks like `useConnect`, `useBalance`, `useSpend`, `useReadContract`, and more.
|
|
18
|
+
|
|
19
|
+
## Install
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
# npm
|
|
23
|
+
npm install @growae/reactive-react @growae/reactive @tanstack/react-query
|
|
24
|
+
|
|
25
|
+
# yarn
|
|
26
|
+
yarn add @growae/reactive-react @growae/reactive @tanstack/react-query
|
|
27
|
+
|
|
28
|
+
# pnpm
|
|
29
|
+
pnpm add @growae/reactive-react @growae/reactive @tanstack/react-query
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Usage
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { createConfig } from '@growae/reactive'
|
|
36
|
+
import { testnet } from '@growae/reactive/networks'
|
|
37
|
+
import { superhero } from '@growae/reactive-connectors'
|
|
38
|
+
import { ReactiveProvider } from '@growae/reactive-react'
|
|
39
|
+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
|
40
|
+
|
|
41
|
+
const config = createConfig({
|
|
42
|
+
networks: [testnet],
|
|
43
|
+
connectors: [superhero()],
|
|
44
|
+
})
|
|
45
|
+
|
|
46
|
+
const queryClient = new QueryClient()
|
|
47
|
+
|
|
48
|
+
function App() {
|
|
49
|
+
return (
|
|
50
|
+
<QueryClientProvider client={queryClient}>
|
|
51
|
+
<ReactiveProvider config={config}>
|
|
52
|
+
<Wallet />
|
|
53
|
+
</ReactiveProvider>
|
|
54
|
+
</QueryClientProvider>
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import { useConnect, useBalance, useSpend } from '@growae/reactive-react'
|
|
61
|
+
|
|
62
|
+
function Wallet() {
|
|
63
|
+
const { connect, connectors } = useConnect()
|
|
64
|
+
const { data: balance } = useBalance({ address: 'ak_...' })
|
|
65
|
+
const { mutate: send } = useSpend()
|
|
66
|
+
|
|
67
|
+
return (
|
|
68
|
+
<div>
|
|
69
|
+
<button onClick={() => connect({ connector: connectors[0] })}>
|
|
70
|
+
Connect
|
|
71
|
+
</button>
|
|
72
|
+
{balance && <p>Balance: {balance.ae} AE</p>}
|
|
73
|
+
<button onClick={() => send({ recipient: 'ak_...', amount: '1.0' })}>
|
|
74
|
+
Send 1 AE
|
|
75
|
+
</button>
|
|
76
|
+
</div>
|
|
77
|
+
)
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Peer Dependencies
|
|
82
|
+
|
|
83
|
+
- `react >=18`
|
|
84
|
+
- `@tanstack/react-query >=5`
|
|
85
|
+
|
|
86
|
+
## Documentation
|
|
87
|
+
|
|
88
|
+
Visit [reactive.growae.io/react/getting-started](https://reactive.growae.io/react/getting-started) for the full documentation.
|
|
89
|
+
|
|
90
|
+
## License
|
|
91
|
+
|
|
92
|
+
[MIT](https://github.com/growae/reactive/blob/main/LICENSE)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@growae/reactive-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/esm/exports/index.js",
|
|
6
6
|
"types": "dist/types/exports/index.d.ts",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"use-sync-external-store": "^1.4.0",
|
|
21
|
-
"@growae/reactive": "0.0.
|
|
21
|
+
"@growae/reactive": "0.0.3"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"@tanstack/react-query": ">=5.0.0",
|