@aerostack/react 0.1.0 → 0.1.1
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 +91 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# @aerostack/react
|
|
2
|
+
|
|
3
|
+
The official React SDK for Aerostack. Easily integrate authentication, database, AI, and other Aerostack services into your React applications using idiomatic Hooks.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @aerostack/react
|
|
9
|
+
# or
|
|
10
|
+
yarn add @aerostack/react
|
|
11
|
+
# or
|
|
12
|
+
pnpm add @aerostack/react
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
### 1. Wrap your app in `AerostackProvider`
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { AerostackProvider } from '@aerostack/react';
|
|
21
|
+
|
|
22
|
+
function App() {
|
|
23
|
+
return (
|
|
24
|
+
<AerostackProvider
|
|
25
|
+
projectUrl="https://your-project.aerostack.app"
|
|
26
|
+
apiKey="your-public-api-key"
|
|
27
|
+
>
|
|
28
|
+
<YourComponent />
|
|
29
|
+
</AerostackProvider>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### 2. Use Hooks
|
|
35
|
+
|
|
36
|
+
#### Authentication
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import { useAuth } from '@aerostack/react';
|
|
40
|
+
|
|
41
|
+
function LoginButton() {
|
|
42
|
+
const { signIn, user, isLoading } = useAuth();
|
|
43
|
+
|
|
44
|
+
if (user) return <div>Welcome, {user.email}</div>;
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<button onClick={() => signIn('email', 'password')}>
|
|
48
|
+
{isLoading ? 'Loading...' : 'Sign In'}
|
|
49
|
+
</button>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
#### Database
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
import { useDb } from '@aerostack/react';
|
|
58
|
+
|
|
59
|
+
function TodoList() {
|
|
60
|
+
const { data: todos, isLoading } = useDb('todos').find();
|
|
61
|
+
|
|
62
|
+
if (isLoading) return <div>Loading...</div>;
|
|
63
|
+
|
|
64
|
+
return (
|
|
65
|
+
<ul>
|
|
66
|
+
{todos.map(todo => <li key={todo.id}>{todo.title}</li>)}
|
|
67
|
+
</ul>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
#### AI Chat
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
import { useAI } from '@aerostack/react';
|
|
76
|
+
|
|
77
|
+
function ChatBot() {
|
|
78
|
+
const { messages, sendMessage } = useAI('support-agent');
|
|
79
|
+
|
|
80
|
+
return (
|
|
81
|
+
<div>
|
|
82
|
+
{messages.map(m => <div>{m.content}</div>)}
|
|
83
|
+
<button onClick={() => sendMessage("Hello!")}>Say Hi</button>
|
|
84
|
+
</div>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Documentation
|
|
90
|
+
|
|
91
|
+
For full documentation, visit [docs.aerostack.ai](https://docs.aerostack.ai/sdk/react).
|