Skip to content

Commit ca51225

Browse files
committed
docs(react-sdk): add README.md for NPM package
1 parent 4b7e019 commit ca51225

3 files changed

Lines changed: 99 additions & 0 deletions

File tree

sdks/urbackend-react/README.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# @urbackend/react
2+
3+
The official React SDK for [urBackend](https://urbackend.com) — a MongoDB-native Backend as a Service.
4+
5+
This SDK provides a `<UrProvider>`, authentication UI components, protected routing, and React hooks (`useUser`, `useAuth`, `useDb`, `useStorage`) to seamlessly integrate urBackend into your React applications.
6+
7+
## Installation
8+
9+
Install the React SDK alongside the core SDK:
10+
11+
```bash
12+
npm install @urbackend/react @urbackend/sdk
13+
```
14+
15+
## Quick Start
16+
17+
Wrap your application with `<UrProvider>`:
18+
19+
```tsx
20+
import React from 'react';
21+
import ReactDOM from 'react-dom/client';
22+
import App from './App';
23+
import { UrProvider } from '@urbackend/react';
24+
25+
ReactDOM.createRoot(document.getElementById('root')!).render(
26+
<React.StrictMode>
27+
<UrProvider apiKey="pk_live_your_publishable_key">
28+
<App />
29+
</UrProvider>
30+
</React.StrictMode>
31+
);
32+
```
33+
34+
### Pre-built Auth UI
35+
36+
Use the `<UrAuth>` component to instantly drop in a beautiful authentication screen that handles Email, Password, and Social Providers (Google/GitHub).
37+
38+
```tsx
39+
import { UrAuth, GuestRoute } from '@urbackend/react';
40+
41+
export default function LoginPage() {
42+
return (
43+
<GuestRoute fallback={<div>Loading...</div>} onRedirect={() => window.location.href = '/dashboard'}>
44+
<UrAuth providers={['google', 'github']} theme="light" />
45+
</GuestRoute>
46+
);
47+
}
48+
```
49+
50+
### Using Hooks & Data
51+
52+
Use our hooks to read the session state or fetch data with built-in RLS (Row-Level Security):
53+
54+
```tsx
55+
import { useUser, useDb } from '@urbackend/react';
56+
import { useEffect, useState } from 'react';
57+
58+
export default function Dashboard() {
59+
const { user, logout } = useUser();
60+
const db = useDb();
61+
const [products, setProducts] = useState([]);
62+
63+
useEffect(() => {
64+
async function fetchProducts() {
65+
const data = await db.getAll('products', { limit: 10 });
66+
setProducts(data);
67+
}
68+
fetchProducts();
69+
}, [db]);
70+
71+
return (
72+
<div>
73+
<h1>Welcome, {user?.name}</h1>
74+
<button onClick={logout}>Sign Out</button>
75+
76+
<h2>Products</h2>
77+
<ul>
78+
{products.map(p => (
79+
<li key={p._id}>{p.name}</li>
80+
))}
81+
</ul>
82+
</div>
83+
);
84+
}
85+
```
86+
87+
## Documentation
88+
89+
For full documentation and advanced usage, visit [docs.ub.bitbros.in](https://docs.ub.bitbros.in).
90+
91+
## License
92+
93+
MIT

sdks/urbackend-react/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
"name": "@urbackend/react",
33
"version": "0.1.0",
44
"description": "React SDK for urBackend",
5+
"publishConfig": {
6+
"access": "public"
7+
},
58
"main": "./dist/index.js",
69
"module": "./dist/index.mjs",
710
"types": "./dist/index.d.ts",

sdks/urbackend-sdk/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
"name": "@urbackend/sdk",
33
"version": "0.4.2",
44
"description": "Official TypeScript SDK for urBackend BaaS",
5+
"publishConfig": {
6+
"access": "public"
7+
},
58
"type": "module",
69
"files": [
710
"dist",

0 commit comments

Comments
 (0)