@jitsu/jitsu-react 1.0.0-canary-20230219230449 → 1.1.0-canary.205

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.
Files changed (2) hide show
  1. package/README.md +19 -90
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,8 +1,7 @@
1
1
  # jitsu-react
2
2
 
3
- >
4
3
 
5
- [![NPM](https://img.shields.io/npm/v/jitsu-react2.svg)](https://www.npmjs.com/package/jitsu-react2) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
4
+ [![NPM](https://img.shields.io/npm/v/@jitsu/jitsu-react.svg)](https://www.npmjs.com/package/@jitsu/jitsu-react)
6
5
 
7
6
  ## Install
8
7
 
@@ -13,111 +12,41 @@ npm install --save @jitsu/jitsu-react
13
12
  ## Usage
14
13
 
15
14
  To setup Jitsu-React library you need to add `JitsuProvider` component close to the root level of your app:
16
- ```tsx
17
- import React, { Component } from 'react'
18
- import { JitsuProvider } from "@jitsu/jitsu-react";
19
-
20
- class Example extends Component {
21
- render() {
22
- return <JitsuProvider options={{ host: "https://mysiteid.d.jitsu.com" }} >
23
- <App />
24
- </JitsuProvider>
25
- }
26
- }
27
- ```
28
15
 
29
- Then use `useJitsu` hook in components where you want to track events.
30
16
  ```tsx
31
- import * as React from "react";
32
- import { useJitsu } from "@jitsu/jitsu-react";
17
+ import React from "react";
18
+ import { JitsuProvider } from "@jitsu/jitsu-react";
33
19
 
34
20
  export default function App() {
35
- const { analytics } = useJitsu();
36
- // manually track page view
37
- analytics.page();
38
-
39
- return (
40
- <div>
41
- ...
42
- </div>
43
- );
21
+ return <JitsuProvider options={{ host: "https://<id>.d.jitsu.com" }}>
22
+ <Page />
23
+ </JitsuProvider>;
44
24
  }
45
25
  ```
46
26
 
47
- ## Auto Page Tracking
48
-
49
- ### For react-router:
50
- To enable auto page tracking with react-router, pass `useLocation` hook from `react-router-dom` to `autoPageTracking` option:
51
- ```tsx
52
- import * as React from "react";
53
- import { useLocation } from "react-router-dom";
54
- import { useJitsu } from "@jitsu/jitsu-react";
55
-
56
- export default function App() {
57
- useJitsu({
58
- // Enable auto page tracking with react-router
59
- autoPageTracking: {
60
- reactRouter: useLocation
61
- },
62
- });
63
-
64
- return (
65
- <div>
66
- ...
67
- </div>
68
- );
69
- }
70
- ```
27
+ Then use `useJitsu` hook in components where you want to track events.
71
28
 
72
- ### For Next.JS router:
73
- To enable auto page tracking with Next.JS router, pass `useRouter` hook from `next/router` to `autoPageTracking` option:
74
29
  ```tsx
75
30
  import * as React from "react";
76
- import { useRouter } from "next/router";
77
31
  import { useJitsu } from "@jitsu/jitsu-react";
32
+ import { useEffect } from "react";
78
33
 
79
- export default function App() {
80
- useJitsu({
81
- // Enable auto page tracking with Next.JS router
82
- autoPageTracking: {
83
- nextjsRouter: useRouter
84
- },
85
- });
34
+ export default function Page() {
35
+ const { analytics } = useJitsu();
36
+ useEffect(() => {
37
+ // Track page view
38
+ analytics.track("event", { prop: "value" });
39
+ }, [location]);
86
40
 
87
41
  return (
88
42
  <div>
89
- ...
43
+ <button onClick={() => analytics.track("button-click")}>Click me!</button>
90
44
  </div>
91
45
  );
92
46
  }
93
47
  ```
94
48
 
95
-
96
- ## User 'identify' events
97
-
98
- Please check `../../examples/react-app` for a full example of how to automatically send `identify` event when user logins on your site.
99
-
100
- Partial snippet:
101
- ```tsx
102
- export default function App() {
103
- const user = useUser();
104
-
105
- useJitsu({
106
- autoPageTracking: {
107
- reactRouter: useLocation,
108
- before: function (analytics) {
109
- if (user && user.id) {
110
- analytics.identify(user.id, { name: user.name, email: user.email });
111
- }
112
- },
113
- beforeDeps: [user],
114
- },
115
- });
116
-
117
- return (
118
- <div>
119
- ...
120
- </div>
121
- );
122
- }
123
- ```
49
+ As `location` you should use an value that changes on every navigation. Examples:
50
+ * React Router: `useLocationHook()`
51
+ * Next.js: `const rounter = useRouter()`; then `router.asPath`
52
+ * Others: `[window.location.pathname, window.location.search, window.location.hash]`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jitsu/jitsu-react",
3
- "version": "1.0.0-canary-20230219230449",
3
+ "version": "1.1.0-canary.205",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -11,7 +11,7 @@
11
11
  "node": ">=10"
12
12
  },
13
13
  "dependencies": {
14
- "@jitsu/js": "1.0.0-canary-20230219230449"
14
+ "@jitsu/js": "1.1.0-canary.205"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": "15.x || 16.x || 17.x || 18.x",
@@ -36,7 +36,7 @@
36
36
  "@types/node": "^18.11.9",
37
37
  "microbundle-crl": "^0.13.11",
38
38
  "typescript": "^4.9.3",
39
- "@jitsu/js": "1.0.0-canary-20230219230449"
39
+ "@jitsu/js": "1.1.0-canary.205"
40
40
  },
41
41
  "files": [
42
42
  "dist"