@superwall/paywalls-react 0.1.2 → 0.1.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/README.md +79 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# @superwall/paywalls-react
|
|
2
|
+
|
|
3
|
+
React 19 bindings for the Superwall web SDK — a provider + hooks over
|
|
4
|
+
[`@superwall/paywalls-js`](https://www.npmjs.com/package/@superwall/paywalls-js).
|
|
5
|
+
|
|
6
|
+
```sh
|
|
7
|
+
bun add @superwall/paywalls-react # or npm / pnpm / yarn
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
## Quick start
|
|
11
|
+
|
|
12
|
+
Wrap your app once:
|
|
13
|
+
|
|
14
|
+
```tsx
|
|
15
|
+
import { SuperwallProvider } from "@superwall/paywalls-react";
|
|
16
|
+
|
|
17
|
+
export function Root() {
|
|
18
|
+
return (
|
|
19
|
+
<SuperwallProvider apiKey="pk_your_public_key">
|
|
20
|
+
<App />
|
|
21
|
+
</SuperwallProvider>
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
`SuperwallProvider` takes the same config as `createSuperwall`
|
|
27
|
+
(`apiKey`, `storage`, `delegate`, `identity`, `options`).
|
|
28
|
+
|
|
29
|
+
## Placements
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import { usePlacement } from "@superwall/paywalls-react";
|
|
33
|
+
|
|
34
|
+
function GoPro() {
|
|
35
|
+
const { register, state } = usePlacement({
|
|
36
|
+
onPresent: (info) => {},
|
|
37
|
+
onDismiss: (info, result) => {},
|
|
38
|
+
onSkip: (reason) => {},
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
<button onClick={() => register({ placement: "campaign_trigger" })}>
|
|
43
|
+
Go Pro {state.type === "presented" && "(open)"}
|
|
44
|
+
</button>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Subscription status & user
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import { useUser } from "@superwall/paywalls-react";
|
|
53
|
+
|
|
54
|
+
function Status() {
|
|
55
|
+
const { id, isLoggedIn, subscriptionStatus, entitlements, identify, signOut } =
|
|
56
|
+
useUser();
|
|
57
|
+
|
|
58
|
+
if (subscriptionStatus.status === "ACTIVE") return <Pro />;
|
|
59
|
+
return <button onClick={() => identify("app_user_123")}>Log in</button>;
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Hooks
|
|
64
|
+
|
|
65
|
+
| Hook | What it gives you |
|
|
66
|
+
|------|-------------------|
|
|
67
|
+
| `useSuperwall()` | the raw `Superwall` instance |
|
|
68
|
+
| `usePlacement(handler?)` | `{ register, state }` |
|
|
69
|
+
| `useUser()` | reactive identity + subscription + `identify`/`signOut`/`setAttributes` |
|
|
70
|
+
| `useSignal(signal)` | subscribe to any SDK `Readable<T>` |
|
|
71
|
+
| `useSuperwallEvent(name, fn)` | typed event listener, auto-cleanup |
|
|
72
|
+
| `useDelegate(delegate)` | install [delegate callbacks](https://www.npmjs.com/package/@superwall/paywalls-js#delegate-methods) for the component's lifetime |
|
|
73
|
+
|
|
74
|
+
All of `@superwall/paywalls-js` is re-exported, so you don't need to depend on
|
|
75
|
+
both packages directly.
|
|
76
|
+
|
|
77
|
+
## License
|
|
78
|
+
|
|
79
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@superwall/paywalls-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"exports": {
|
|
@@ -17,10 +17,10 @@
|
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"react": "^19.0.0",
|
|
20
|
-
"@superwall/paywalls-js": "0.1.
|
|
20
|
+
"@superwall/paywalls-js": "^0.1.3"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@superwall/paywalls-js": "0.1.
|
|
23
|
+
"@superwall/paywalls-js": "^0.1.3"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@happy-dom/global-registrator": "^20.0.0",
|