@onramp-sdk/react 0.1.0
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/LICENSE +21 -0
- package/README.md +128 -0
- package/dist/OnRampProvider.d.ts +15 -0
- package/dist/OnRampProvider.d.ts.map +1 -0
- package/dist/OnRampProvider.js +26 -0
- package/dist/OnRampProvider.js.map +1 -0
- package/dist/RouteTracker.d.ts +14 -0
- package/dist/RouteTracker.d.ts.map +1 -0
- package/dist/RouteTracker.js +26 -0
- package/dist/RouteTracker.js.map +1 -0
- package/dist/core.d.ts +38 -0
- package/dist/core.d.ts.map +1 -0
- package/dist/core.js +174 -0
- package/dist/core.js.map +1 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +5 -0
- package/dist/index.js.map +1 -0
- package/dist/next.d.ts +2 -0
- package/dist/next.d.ts.map +1 -0
- package/dist/next.js +4 -0
- package/dist/next.js.map +1 -0
- package/dist/useOnRamp.d.ts +19 -0
- package/dist/useOnRamp.d.ts.map +1 -0
- package/dist/useOnRamp.js +26 -0
- package/dist/useOnRamp.js.map +1 -0
- package/dist/useTrackStep.d.ts +19 -0
- package/dist/useTrackStep.d.ts.map +1 -0
- package/dist/useTrackStep.js +27 -0
- package/dist/useTrackStep.js.map +1 -0
- package/package.json +62 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 OnRamp
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# @onramp-sdk/react
|
|
2
|
+
|
|
3
|
+
OnRamp onboarding funnel analytics for **React & Next.js**. Track where users drop off during onboarding, with hooks and a provider that fit naturally into a React tree.
|
|
4
|
+
|
|
5
|
+
**[onway.dev](https://onway.dev)**
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @onramp-sdk/react
|
|
11
|
+
# or
|
|
12
|
+
yarn add @onramp-sdk/react
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
`react >= 18` is a peer dependency. `next >= 13` is an optional peer — only needed for the route tracker in `@onramp-sdk/react/next`.
|
|
16
|
+
|
|
17
|
+
## Setup
|
|
18
|
+
|
|
19
|
+
### 1. Wrap your app in the provider
|
|
20
|
+
|
|
21
|
+
`<OnRampProvider>` initializes the SDK once on the client. It's SSR-safe — it no-ops on the server and starts tracking in the browser.
|
|
22
|
+
|
|
23
|
+
**Next.js App Router** (`app/layout.tsx`):
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { OnRampProvider } from '@onramp-sdk/react'
|
|
27
|
+
|
|
28
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
29
|
+
return (
|
|
30
|
+
<html>
|
|
31
|
+
<body>
|
|
32
|
+
<OnRampProvider apiKey="onr_your_api_key" host="https://your-ingestion-url" appVersion="1.0.0">
|
|
33
|
+
{children}
|
|
34
|
+
</OnRampProvider>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
37
|
+
)
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
`<OnRampProvider>` is a client component, so it only opts its own subtree into client rendering — your layout and pages stay server components.
|
|
42
|
+
|
|
43
|
+
**Plain React** (e.g. Vite, CRA): wrap your root the same way.
|
|
44
|
+
|
|
45
|
+
### 2. Track milestones
|
|
46
|
+
|
|
47
|
+
From any client component below the provider:
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
'use client'
|
|
51
|
+
import { useOnRamp } from '@onramp-sdk/react'
|
|
52
|
+
|
|
53
|
+
export function PlanPicker() {
|
|
54
|
+
const { step } = useOnRamp()
|
|
55
|
+
return (
|
|
56
|
+
<button onClick={() => step('plan_selected', { properties: { plan: 'pro' } })}>
|
|
57
|
+
Choose Pro
|
|
58
|
+
</button>
|
|
59
|
+
)
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Or mark a step the moment a screen renders with `useTrackStep`:
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
'use client'
|
|
67
|
+
import { useTrackStep } from '@onramp-sdk/react'
|
|
68
|
+
|
|
69
|
+
export function ProfileSetup() {
|
|
70
|
+
useTrackStep('profile_setup_viewed')
|
|
71
|
+
return <>...</>
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### 3. (Next.js) Auto-track route changes — optional
|
|
76
|
+
|
|
77
|
+
Mount `<OnRampRouteTracker />` once inside the provider to record every App Router navigation. These are tagged as navigation events and kept **out** of your defined funnels — they power the session timeline, not conversion steps.
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
import { OnRampProvider } from '@onramp-sdk/react'
|
|
81
|
+
import { OnRampRouteTracker } from '@onramp-sdk/react/next'
|
|
82
|
+
|
|
83
|
+
<OnRampProvider apiKey="onr_your_api_key">
|
|
84
|
+
<OnRampRouteTracker />
|
|
85
|
+
{children}
|
|
86
|
+
</OnRampProvider>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## API
|
|
90
|
+
|
|
91
|
+
### `<OnRampProvider>`
|
|
92
|
+
|
|
93
|
+
| Prop | Type | Required | Description |
|
|
94
|
+
|---|---|---|---|
|
|
95
|
+
| `apiKey` | `string` | ✓ | Your app's API key from the OnRamp dashboard |
|
|
96
|
+
| `host` | `string` | | Ingestion API base URL |
|
|
97
|
+
| `appVersion` | `string` | | App version string — enables the version breakdown |
|
|
98
|
+
| `framework` | `string` | | Runtime label on each event (default `'react'`; e.g. `'nextjs'`) |
|
|
99
|
+
| `sessionTimeoutMs` | `number` | | Idle window before a new session starts (default 30 min) |
|
|
100
|
+
|
|
101
|
+
### `useOnRamp()`
|
|
102
|
+
|
|
103
|
+
Returns `{ step, newSession, flush }`.
|
|
104
|
+
|
|
105
|
+
- `step(stepName, { properties? })` — track a milestone.
|
|
106
|
+
- `newSession()` — force-start a new session (e.g. after logout).
|
|
107
|
+
- `flush()` — flush queued events immediately (also runs automatically on tab hide/close).
|
|
108
|
+
|
|
109
|
+
### `useTrackStep(stepName, options?)`
|
|
110
|
+
|
|
111
|
+
Fires a step on mount (and again if `stepName` changes).
|
|
112
|
+
|
|
113
|
+
| Option | Type | Description |
|
|
114
|
+
|---|---|---|
|
|
115
|
+
| `properties` | `Record<string, string \| number \| boolean>` | Custom properties for this step |
|
|
116
|
+
| `enabled` | `boolean` | Skip tracking while `false` (e.g. gate on a ready state) |
|
|
117
|
+
|
|
118
|
+
### Imperative `OnRamp`
|
|
119
|
+
|
|
120
|
+
The same singleton is exported directly for use outside the React tree (e.g. event handlers in non-component modules): `import { OnRamp } from '@onramp-sdk/react'`. Call `OnRamp.init(config)` yourself if you don't use the provider.
|
|
121
|
+
|
|
122
|
+
## How Funnels Work
|
|
123
|
+
|
|
124
|
+
Funnels are defined in the **OnRamp dashboard**, not in the SDK. You call `step()` with a step name; the dashboard decides which steps form which funnel and in what order — no SDK changes when you iterate on funnel structure.
|
|
125
|
+
|
|
126
|
+
## License
|
|
127
|
+
|
|
128
|
+
MIT
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import { type OnRampReactConfig } from './core.js';
|
|
3
|
+
export interface OnRampProviderProps extends OnRampReactConfig {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Initializes OnRamp once on the client and makes the tracker available to
|
|
8
|
+
* `useOnRamp` / `useTrackStep` below it. Render it high in your tree — in
|
|
9
|
+
* Next.js App Router, inside the root layout (it's a client component, so it
|
|
10
|
+
* won't opt your whole layout into client rendering; only its own subtree).
|
|
11
|
+
*/
|
|
12
|
+
export declare function OnRampProvider({ children, ...config }: OnRampProviderProps): import("react").JSX.Element;
|
|
13
|
+
/** @internal — true when a provider is mounted above the caller. */
|
|
14
|
+
export declare function useHasOnRampProvider(): boolean;
|
|
15
|
+
//# sourceMappingURL=OnRampProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OnRampProvider.d.ts","sourceRoot":"","sources":["../src/OnRampProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAU,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAI1D,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAE,EAAE,mBAAmB,+BAW1E;AAED,oEAAoE;AACpE,wBAAgB,oBAAoB,IAAI,OAAO,CAE9C"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { createContext, useContext, useEffect, useRef } from 'react';
|
|
4
|
+
import { OnRamp } from './core.js';
|
|
5
|
+
const OnRampContext = createContext(false);
|
|
6
|
+
/**
|
|
7
|
+
* Initializes OnRamp once on the client and makes the tracker available to
|
|
8
|
+
* `useOnRamp` / `useTrackStep` below it. Render it high in your tree — in
|
|
9
|
+
* Next.js App Router, inside the root layout (it's a client component, so it
|
|
10
|
+
* won't opt your whole layout into client rendering; only its own subtree).
|
|
11
|
+
*/
|
|
12
|
+
export function OnRampProvider({ children, ...config }) {
|
|
13
|
+
// Keep the latest config without re-running init — init is intentionally
|
|
14
|
+
// once-per-page-load (session + listeners are global).
|
|
15
|
+
const configRef = useRef(config);
|
|
16
|
+
configRef.current = config;
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
OnRamp.init(configRef.current);
|
|
19
|
+
}, []);
|
|
20
|
+
return _jsx(OnRampContext.Provider, { value: true, children: children });
|
|
21
|
+
}
|
|
22
|
+
/** @internal — true when a provider is mounted above the caller. */
|
|
23
|
+
export function useHasOnRampProvider() {
|
|
24
|
+
return useContext(OnRampContext);
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=OnRampProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OnRampProvider.js","sourceRoot":"","sources":["../src/OnRampProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEpE,OAAO,EAAE,MAAM,EAA0B,MAAM,WAAW,CAAA;AAE1D,MAAM,aAAa,GAAG,aAAa,CAAU,KAAK,CAAC,CAAA;AAMnD;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAuB;IACzE,yEAAyE;IACzE,uDAAuD;IACvD,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;IAChC,SAAS,CAAC,OAAO,GAAG,MAAM,CAAA;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;IAChC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,YAAG,QAAQ,GAA0B,CAAA;AACjF,CAAC;AAED,oEAAoE;AACpE,MAAM,UAAU,oBAAoB;IAClC,OAAO,UAAU,CAAC,aAAa,CAAC,CAAA;AAClC,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Auto-tracks route changes in the Next.js App Router as navigation events.
|
|
3
|
+
*
|
|
4
|
+
* These are tagged so the dashboard keeps them out of your defined funnels —
|
|
5
|
+
* they power the session timeline, not conversion steps. Mount once in your
|
|
6
|
+
* root layout:
|
|
7
|
+
*
|
|
8
|
+
* ```tsx
|
|
9
|
+
* import { OnRampRouteTracker } from '@onramp-sdk/react/next'
|
|
10
|
+
* // <OnRampProvider apiKey="..."><OnRampRouteTracker />{children}</OnRampProvider>
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
export declare function OnRampRouteTracker(): null;
|
|
14
|
+
//# sourceMappingURL=RouteTracker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RouteTracker.d.ts","sourceRoot":"","sources":["../src/RouteTracker.tsx"],"names":[],"mappings":"AAMA;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CASzC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { useEffect } from 'react';
|
|
3
|
+
import { usePathname } from 'next/navigation';
|
|
4
|
+
import { OnRamp } from './core.js';
|
|
5
|
+
/**
|
|
6
|
+
* Auto-tracks route changes in the Next.js App Router as navigation events.
|
|
7
|
+
*
|
|
8
|
+
* These are tagged so the dashboard keeps them out of your defined funnels —
|
|
9
|
+
* they power the session timeline, not conversion steps. Mount once in your
|
|
10
|
+
* root layout:
|
|
11
|
+
*
|
|
12
|
+
* ```tsx
|
|
13
|
+
* import { OnRampRouteTracker } from '@onramp-sdk/react/next'
|
|
14
|
+
* // <OnRampProvider apiKey="..."><OnRampRouteTracker />{children}</OnRampProvider>
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
export function OnRampRouteTracker() {
|
|
18
|
+
const pathname = usePathname();
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
if (!pathname)
|
|
21
|
+
return;
|
|
22
|
+
OnRamp.step(pathname, { _eventType: 'nav_entered', properties: { _nav: true } });
|
|
23
|
+
}, [pathname]);
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=RouteTracker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RouteTracker.js","sourceRoot":"","sources":["../src/RouteTracker.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,kBAAkB;IAChC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAE9B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ;YAAE,OAAM;QACrB,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAA;IAClF,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,OAAO,IAAI,CAAA;AACb,CAAC"}
|
package/dist/core.d.ts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
export interface OnRampReactConfig {
|
|
2
|
+
/** Your app's API key from the OnRamp dashboard. */
|
|
3
|
+
apiKey: string;
|
|
4
|
+
/** Ingestion API base URL. */
|
|
5
|
+
host?: string;
|
|
6
|
+
/** App version string, e.g. "2.4.1" — enables the version breakdown in the dashboard. */
|
|
7
|
+
appVersion?: string;
|
|
8
|
+
/**
|
|
9
|
+
* SDK/runtime label reported on each event. Defaults to `'react'`; set
|
|
10
|
+
* `'nextjs'` (or your own) to distinguish surfaces in the dashboard.
|
|
11
|
+
*/
|
|
12
|
+
framework?: string;
|
|
13
|
+
/** Quit-and-return within this window continues the same session. Default 30 min. */
|
|
14
|
+
sessionTimeoutMs?: number;
|
|
15
|
+
}
|
|
16
|
+
export interface StepOptions {
|
|
17
|
+
/** Custom event properties (e.g. { plan: 'free', source: 'invite' }). */
|
|
18
|
+
properties?: Record<string, string | number | boolean>;
|
|
19
|
+
/** @internal Used by the route tracker — not part of the public API. */
|
|
20
|
+
_eventType?: 'nav_entered';
|
|
21
|
+
}
|
|
22
|
+
export declare const OnRamp: {
|
|
23
|
+
/**
|
|
24
|
+
* Initialize the SDK. Safe to call during SSR (no-ops on the server) and
|
|
25
|
+
* idempotent on the client, so it's fine to call from an effect that may
|
|
26
|
+
* run more than once (e.g. React StrictMode).
|
|
27
|
+
*/
|
|
28
|
+
init(config: OnRampReactConfig): void;
|
|
29
|
+
/** Track a milestone in your onboarding flow. */
|
|
30
|
+
step(stepName: string, options?: StepOptions): void;
|
|
31
|
+
/** Force-start a new session (e.g. after logout). */
|
|
32
|
+
newSession(): void;
|
|
33
|
+
/** Flush queued events immediately. Also runs automatically on tab hide/close. */
|
|
34
|
+
flush(): Promise<void>;
|
|
35
|
+
/** Whether init() has run on the client. */
|
|
36
|
+
readonly isInitialized: boolean;
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=core.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"AAsCA,MAAM,WAAW,iBAAiB;IAChC,oDAAoD;IACpD,MAAM,EAAE,MAAM,CAAA;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AA6DD,MAAM,WAAW,WAAW;IAC1B,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;IACtD,wEAAwE;IACxE,UAAU,CAAC,EAAE,aAAa,CAAA;CAC3B;AAED,eAAO,MAAM,MAAM;IACjB;;;;OAIG;iBACU,iBAAiB,GAAG,IAAI;IA6CrC,iDAAiD;mBAClC,MAAM,YAAY,WAAW,GAAG,IAAI;IAwBnD,qDAAqD;kBACvC,IAAI;IAIlB,kFAAkF;aACzE,OAAO,CAAC,IAAI,CAAC;IAItB,4CAA4C;4BACvB,OAAO;CAG7B,CAAA"}
|
package/dist/core.js
ADDED
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
import { OnRampClient } from '@onramp-sdk/core';
|
|
2
|
+
const ANON_KEY = '@onramp/anonymous_id';
|
|
3
|
+
const SESSION_KEY = '@onramp/session';
|
|
4
|
+
const DEFAULT_SESSION_TIMEOUT_MS = 30 * 60 * 1000; // 30 min
|
|
5
|
+
function uuid() {
|
|
6
|
+
if (typeof crypto !== 'undefined' && crypto.randomUUID)
|
|
7
|
+
return crypto.randomUUID();
|
|
8
|
+
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
|
9
|
+
const r = (Math.random() * 16) | 0;
|
|
10
|
+
return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
const hasWindow = () => typeof window !== 'undefined';
|
|
14
|
+
function safeGet(key) {
|
|
15
|
+
try {
|
|
16
|
+
return localStorage.getItem(key);
|
|
17
|
+
}
|
|
18
|
+
catch {
|
|
19
|
+
return null;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
function safeSet(key, value) {
|
|
23
|
+
try {
|
|
24
|
+
localStorage.setItem(key, value);
|
|
25
|
+
}
|
|
26
|
+
catch {
|
|
27
|
+
// localStorage unavailable (private mode, quota) — degrade silently
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
let client = null;
|
|
31
|
+
let currentSessionId = null;
|
|
32
|
+
let anonymousId = null;
|
|
33
|
+
let stepCounter = 0;
|
|
34
|
+
let sessionTimeoutMs = DEFAULT_SESSION_TIMEOUT_MS;
|
|
35
|
+
let lastActive = 0;
|
|
36
|
+
let started = false;
|
|
37
|
+
function getOrCreateAnonymousId() {
|
|
38
|
+
const existing = safeGet(ANON_KEY);
|
|
39
|
+
if (existing)
|
|
40
|
+
return existing;
|
|
41
|
+
const id = uuid();
|
|
42
|
+
safeSet(ANON_KEY, id);
|
|
43
|
+
return id;
|
|
44
|
+
}
|
|
45
|
+
function loadSession() {
|
|
46
|
+
const raw = safeGet(SESSION_KEY);
|
|
47
|
+
if (!raw)
|
|
48
|
+
return null;
|
|
49
|
+
try {
|
|
50
|
+
return JSON.parse(raw);
|
|
51
|
+
}
|
|
52
|
+
catch {
|
|
53
|
+
return null;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
function persistSession() {
|
|
57
|
+
if (!currentSessionId)
|
|
58
|
+
return;
|
|
59
|
+
safeSet(SESSION_KEY, JSON.stringify({ id: currentSessionId, lastActive, stepCounter }));
|
|
60
|
+
}
|
|
61
|
+
function rotateSession() {
|
|
62
|
+
currentSessionId = uuid();
|
|
63
|
+
stepCounter = 0;
|
|
64
|
+
lastActive = Date.now();
|
|
65
|
+
persistSession();
|
|
66
|
+
}
|
|
67
|
+
/** Rotate the session if the user has been away longer than the timeout. */
|
|
68
|
+
function ensureSessionFresh() {
|
|
69
|
+
if (!currentSessionId || Date.now() - lastActive > sessionTimeoutMs) {
|
|
70
|
+
rotateSession();
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
// Coarse device class from the user agent — good enough for funnel breakdowns.
|
|
74
|
+
function getDeviceType() {
|
|
75
|
+
if (typeof navigator === 'undefined')
|
|
76
|
+
return 'desktop';
|
|
77
|
+
const ua = navigator.userAgent;
|
|
78
|
+
if (/iPad|Tablet|(Android(?!.*Mobile))/i.test(ua))
|
|
79
|
+
return 'tablet';
|
|
80
|
+
if (/Mobi|Android|iPhone|iPod/i.test(ua))
|
|
81
|
+
return 'phone';
|
|
82
|
+
return 'desktop';
|
|
83
|
+
}
|
|
84
|
+
function getOsVersion() {
|
|
85
|
+
if (typeof navigator === 'undefined')
|
|
86
|
+
return null;
|
|
87
|
+
return navigator.userAgent.slice(0, 64);
|
|
88
|
+
}
|
|
89
|
+
export const OnRamp = {
|
|
90
|
+
/**
|
|
91
|
+
* Initialize the SDK. Safe to call during SSR (no-ops on the server) and
|
|
92
|
+
* idempotent on the client, so it's fine to call from an effect that may
|
|
93
|
+
* run more than once (e.g. React StrictMode).
|
|
94
|
+
*/
|
|
95
|
+
init(config) {
|
|
96
|
+
if (!hasWindow())
|
|
97
|
+
return; // server — defer to the client
|
|
98
|
+
if (started)
|
|
99
|
+
return; // already initialized this page load
|
|
100
|
+
sessionTimeoutMs = config.sessionTimeoutMs ?? DEFAULT_SESSION_TIMEOUT_MS;
|
|
101
|
+
anonymousId = getOrCreateAnonymousId();
|
|
102
|
+
// Resume the previous session if the user returned within the timeout window.
|
|
103
|
+
const stored = loadSession();
|
|
104
|
+
if (stored && Date.now() - stored.lastActive < sessionTimeoutMs) {
|
|
105
|
+
currentSessionId = stored.id;
|
|
106
|
+
stepCounter = stored.stepCounter;
|
|
107
|
+
lastActive = stored.lastActive;
|
|
108
|
+
}
|
|
109
|
+
else {
|
|
110
|
+
rotateSession();
|
|
111
|
+
}
|
|
112
|
+
client = new OnRampClient({
|
|
113
|
+
apiKey: config.apiKey,
|
|
114
|
+
host: config.host,
|
|
115
|
+
platform: 'web',
|
|
116
|
+
framework: config.framework ?? 'react',
|
|
117
|
+
appVersion: config.appVersion ?? null,
|
|
118
|
+
uuidFn: uuid,
|
|
119
|
+
});
|
|
120
|
+
// Last-chance flushes when the tab is hidden or closed.
|
|
121
|
+
window.addEventListener('pagehide', () => {
|
|
122
|
+
lastActive = Date.now();
|
|
123
|
+
persistSession();
|
|
124
|
+
client?.flush();
|
|
125
|
+
});
|
|
126
|
+
document.addEventListener('visibilitychange', () => {
|
|
127
|
+
if (document.visibilityState === 'hidden') {
|
|
128
|
+
lastActive = Date.now();
|
|
129
|
+
persistSession();
|
|
130
|
+
client?.flush();
|
|
131
|
+
}
|
|
132
|
+
else {
|
|
133
|
+
ensureSessionFresh();
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
started = true;
|
|
137
|
+
},
|
|
138
|
+
/** Track a milestone in your onboarding flow. */
|
|
139
|
+
step(stepName, options) {
|
|
140
|
+
if (!hasWindow())
|
|
141
|
+
return;
|
|
142
|
+
if (!client || !currentSessionId || !anonymousId) {
|
|
143
|
+
console.warn('[OnRamp] call OnRamp.init() (or mount <OnRampProvider>) before tracking steps');
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
146
|
+
ensureSessionFresh();
|
|
147
|
+
const index = stepCounter++;
|
|
148
|
+
lastActive = Date.now();
|
|
149
|
+
persistSession();
|
|
150
|
+
client.track({
|
|
151
|
+
sessionId: currentSessionId,
|
|
152
|
+
anonymousId,
|
|
153
|
+
eventType: options?._eventType,
|
|
154
|
+
stepName,
|
|
155
|
+
stepIndex: index,
|
|
156
|
+
osVersion: getOsVersion(),
|
|
157
|
+
deviceType: getDeviceType(),
|
|
158
|
+
properties: options?.properties ?? null,
|
|
159
|
+
});
|
|
160
|
+
},
|
|
161
|
+
/** Force-start a new session (e.g. after logout). */
|
|
162
|
+
newSession() {
|
|
163
|
+
rotateSession();
|
|
164
|
+
},
|
|
165
|
+
/** Flush queued events immediately. Also runs automatically on tab hide/close. */
|
|
166
|
+
flush() {
|
|
167
|
+
return client?.flush() ?? Promise.resolve();
|
|
168
|
+
},
|
|
169
|
+
/** Whether init() has run on the client. */
|
|
170
|
+
get isInitialized() {
|
|
171
|
+
return started;
|
|
172
|
+
},
|
|
173
|
+
};
|
|
174
|
+
//# sourceMappingURL=core.js.map
|
package/dist/core.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"core.js","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { OnRamp } from './core.js';
|
|
2
|
+
export type { OnRampReactConfig, StepOptions } from './core.js';
|
|
3
|
+
export { OnRampProvider } from './OnRampProvider.js';
|
|
4
|
+
export type { OnRampProviderProps } from './OnRampProvider.js';
|
|
5
|
+
export { useOnRamp } from './useOnRamp.js';
|
|
6
|
+
export type { OnRampApi } from './useOnRamp.js';
|
|
7
|
+
export { useTrackStep } from './useTrackStep.js';
|
|
8
|
+
export type { UseTrackStepOptions } from './useTrackStep.js';
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA"}
|
package/dist/next.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/next.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA"}
|
package/dist/next.js
ADDED
package/dist/next.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"next.js","sourceRoot":"","sources":["../src/next.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,sEAAsE;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { type StepOptions } from './core.js';
|
|
2
|
+
export interface OnRampApi {
|
|
3
|
+
/** Track a milestone, e.g. `step('account_created')`. */
|
|
4
|
+
step: (stepName: string, options?: Pick<StepOptions, 'properties'>) => void;
|
|
5
|
+
/** Force-start a new session (e.g. after logout). */
|
|
6
|
+
newSession: () => void;
|
|
7
|
+
/** Flush queued events immediately. */
|
|
8
|
+
flush: () => Promise<void>;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Access the OnRamp tracker from any client component below `<OnRampProvider>`.
|
|
12
|
+
*
|
|
13
|
+
* ```tsx
|
|
14
|
+
* const { step } = useOnRamp()
|
|
15
|
+
* <button onClick={() => step('plan_selected', { properties: { plan: 'pro' } })} />
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare function useOnRamp(): OnRampApi;
|
|
19
|
+
//# sourceMappingURL=useOnRamp.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useOnRamp.d.ts","sourceRoot":"","sources":["../src/useOnRamp.ts"],"names":[],"mappings":"AAGA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAGpD,MAAM,WAAW,SAAS;IACxB,yDAAyD;IACzD,IAAI,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC,KAAK,IAAI,CAAA;IAC3E,qDAAqD;IACrD,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,uCAAuC;IACvC,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC3B;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,IAAI,SAAS,CAiBrC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { useEffect, useMemo } from 'react';
|
|
3
|
+
import { OnRamp } from './core.js';
|
|
4
|
+
import { useHasOnRampProvider } from './OnRampProvider.js';
|
|
5
|
+
/**
|
|
6
|
+
* Access the OnRamp tracker from any client component below `<OnRampProvider>`.
|
|
7
|
+
*
|
|
8
|
+
* ```tsx
|
|
9
|
+
* const { step } = useOnRamp()
|
|
10
|
+
* <button onClick={() => step('plan_selected', { properties: { plan: 'pro' } })} />
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
export function useOnRamp() {
|
|
14
|
+
const hasProvider = useHasOnRampProvider();
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
if (!hasProvider && process.env.NODE_ENV !== 'production') {
|
|
17
|
+
console.warn('[OnRamp] useOnRamp() used without an <OnRampProvider> above it');
|
|
18
|
+
}
|
|
19
|
+
}, [hasProvider]);
|
|
20
|
+
return useMemo(() => ({
|
|
21
|
+
step: (stepName, options) => OnRamp.step(stepName, options),
|
|
22
|
+
newSession: () => OnRamp.newSession(),
|
|
23
|
+
flush: () => OnRamp.flush(),
|
|
24
|
+
}), []);
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=useOnRamp.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useOnRamp.js","sourceRoot":"","sources":["../src/useOnRamp.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,MAAM,EAAoB,MAAM,WAAW,CAAA;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAW1D;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS;IACvB,MAAM,WAAW,GAAG,oBAAoB,EAAE,CAAA;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;YAC1D,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAA;QAChF,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,OAAO,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC;QAC3D,UAAU,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE;QACrC,KAAK,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE;KAC5B,CAAC,EACF,EAAE,CACH,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export interface UseTrackStepOptions {
|
|
2
|
+
/** Custom event properties attached to this step. */
|
|
3
|
+
properties?: Record<string, string | number | boolean>;
|
|
4
|
+
/** Skip tracking while false — useful for gating on a loaded/ready state. */
|
|
5
|
+
enabled?: boolean;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Fire a funnel step when a component mounts (and again if `stepName` changes).
|
|
9
|
+
* Handy for marking an onboarding screen as entered the moment it renders:
|
|
10
|
+
*
|
|
11
|
+
* ```tsx
|
|
12
|
+
* function ProfileSetup() {
|
|
13
|
+
* useTrackStep('profile_setup_viewed')
|
|
14
|
+
* return ...
|
|
15
|
+
* }
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare function useTrackStep(stepName: string, options?: UseTrackStepOptions): void;
|
|
19
|
+
//# sourceMappingURL=useTrackStep.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTrackStep.d.ts","sourceRoot":"","sources":["../src/useTrackStep.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,mBAAmB;IAClC,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;IACtD,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAWlF"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { useEffect } from 'react';
|
|
3
|
+
import { OnRamp } from './core.js';
|
|
4
|
+
/**
|
|
5
|
+
* Fire a funnel step when a component mounts (and again if `stepName` changes).
|
|
6
|
+
* Handy for marking an onboarding screen as entered the moment it renders:
|
|
7
|
+
*
|
|
8
|
+
* ```tsx
|
|
9
|
+
* function ProfileSetup() {
|
|
10
|
+
* useTrackStep('profile_setup_viewed')
|
|
11
|
+
* return ...
|
|
12
|
+
* }
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
export function useTrackStep(stepName, options) {
|
|
16
|
+
const enabled = options?.enabled ?? true;
|
|
17
|
+
// Serialize properties so the effect re-fires only on a real value change,
|
|
18
|
+
// not on a new object identity each render.
|
|
19
|
+
const propsKey = options?.properties ? JSON.stringify(options.properties) : '';
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (!enabled)
|
|
22
|
+
return;
|
|
23
|
+
OnRamp.step(stepName, { properties: options?.properties });
|
|
24
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
25
|
+
}, [stepName, enabled, propsKey]);
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=useTrackStep.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTrackStep.js","sourceRoot":"","sources":["../src/useTrackStep.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AASlC;;;;;;;;;;GAUG;AACH,MAAM,UAAU,YAAY,CAAC,QAAgB,EAAE,OAA6B;IAC1E,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,IAAI,IAAI,CAAA;IACxC,2EAA2E;IAC3E,4CAA4C;IAC5C,MAAM,QAAQ,GAAG,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAE9E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAM;QACpB,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAA;QAC1D,uDAAuD;IACzD,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;AACnC,CAAC"}
|
package/package.json
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@onramp-sdk/react",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "OnRamp onboarding funnel analytics for React & Next.js — track steps, see where users drop off.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/onramp-dev/onramp.git",
|
|
10
|
+
"directory": "packages/sdk-react"
|
|
11
|
+
},
|
|
12
|
+
"keywords": [
|
|
13
|
+
"react",
|
|
14
|
+
"nextjs",
|
|
15
|
+
"next",
|
|
16
|
+
"analytics",
|
|
17
|
+
"onboarding",
|
|
18
|
+
"funnel"
|
|
19
|
+
],
|
|
20
|
+
"main": "./dist/index.js",
|
|
21
|
+
"module": "./dist/index.js",
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
23
|
+
"files": [
|
|
24
|
+
"dist"
|
|
25
|
+
],
|
|
26
|
+
"publishConfig": {
|
|
27
|
+
"access": "public"
|
|
28
|
+
},
|
|
29
|
+
"exports": {
|
|
30
|
+
".": {
|
|
31
|
+
"types": "./dist/index.d.ts",
|
|
32
|
+
"import": "./dist/index.js"
|
|
33
|
+
},
|
|
34
|
+
"./next": {
|
|
35
|
+
"types": "./dist/next.d.ts",
|
|
36
|
+
"import": "./dist/next.js"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"dependencies": {
|
|
40
|
+
"@onramp-sdk/shared": "0.2.1",
|
|
41
|
+
"@onramp-sdk/core": "0.4.0"
|
|
42
|
+
},
|
|
43
|
+
"peerDependencies": {
|
|
44
|
+
"react": ">=18.0.0",
|
|
45
|
+
"next": ">=13.0.0"
|
|
46
|
+
},
|
|
47
|
+
"peerDependenciesMeta": {
|
|
48
|
+
"next": {
|
|
49
|
+
"optional": true
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"typescript": "^5.5.0",
|
|
54
|
+
"@types/react": "^18.0.0",
|
|
55
|
+
"react": "^18.3.0",
|
|
56
|
+
"next": "^14.0.0"
|
|
57
|
+
},
|
|
58
|
+
"scripts": {
|
|
59
|
+
"build": "tsc",
|
|
60
|
+
"typecheck": "tsc --noEmit"
|
|
61
|
+
}
|
|
62
|
+
}
|