@gravity-ai/react 1.0.1 → 1.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 +3 -152
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,161 +10,12 @@ npm install @gravity-ai/react
|
|
|
10
10
|
|
|
11
11
|
> **Note:** This package has a peer dependency on React 17+.
|
|
12
12
|
|
|
13
|
-
##
|
|
13
|
+
## Documentation
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
import { Client } from '@gravity-ai/api';
|
|
17
|
-
import { AdBanner } from '@gravity-ai/react';
|
|
18
|
-
import { useEffect, useState } from 'react';
|
|
15
|
+
For full documentation, examples, and API reference, visit:
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
function ChatMessage({ messages }) {
|
|
23
|
-
const [ad, setAd] = useState(null);
|
|
24
|
-
|
|
25
|
-
useEffect(() => {
|
|
26
|
-
client.getAd({
|
|
27
|
-
messages,
|
|
28
|
-
sessionId: 'session-123',
|
|
29
|
-
userId: 'user-456',
|
|
30
|
-
}).then(res => setAd(res?.ads[0] || null));
|
|
31
|
-
}, [messages]);
|
|
32
|
-
|
|
33
|
-
return (
|
|
34
|
-
<div>
|
|
35
|
-
{/* Your chat content */}
|
|
36
|
-
<AdBanner ad={ad} theme="dark" size="medium" />
|
|
37
|
-
</div>
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
## Components
|
|
43
|
-
|
|
44
|
-
### `<AdBanner />`
|
|
45
|
-
|
|
46
|
-
A fully-styled, customizable ad banner component.
|
|
47
|
-
|
|
48
|
-
```tsx
|
|
49
|
-
import { AdBanner } from '@gravity-ai/react';
|
|
50
|
-
|
|
51
|
-
<AdBanner
|
|
52
|
-
ad={ad} // Takes a single ad object (e.g., response.ads[0])
|
|
53
|
-
theme="dark" // 'light' | 'dark' | 'minimal' | 'branded'
|
|
54
|
-
size="medium" // 'small' | 'medium' | 'large' | 'responsive'
|
|
55
|
-
showLabel={true} // Show "Sponsored" label
|
|
56
|
-
labelText="Ad" // Custom label text
|
|
57
|
-
openInNewTab={true} // Open click URL in new tab
|
|
58
|
-
onImpression={() => console.log('Impression tracked')}
|
|
59
|
-
onClickTracked={() => console.log('Click tracked')}
|
|
60
|
-
/>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
#### Props
|
|
64
|
-
|
|
65
|
-
| Prop | Type | Default | Description |
|
|
66
|
-
|------|------|---------|-------------|
|
|
67
|
-
| `ad` | `Ad \| null` | required | A single ad object (e.g., `response.ads[0]`) |
|
|
68
|
-
| `theme` | `'light' \| 'dark' \| 'minimal' \| 'branded'` | `'light'` | Visual theme preset |
|
|
69
|
-
| `size` | `'small' \| 'medium' \| 'large' \| 'responsive'` | `'medium'` | Size preset |
|
|
70
|
-
| `className` | `string` | - | Custom class name for container |
|
|
71
|
-
| `style` | `CSSProperties` | - | Custom inline styles |
|
|
72
|
-
| `showLabel` | `boolean` | `true` | Show "Sponsored" label |
|
|
73
|
-
| `labelText` | `string` | `'Sponsored'` | Custom label text |
|
|
74
|
-
| `fallback` | `ReactNode` | `null` | Content when ad is null |
|
|
75
|
-
| `openInNewTab` | `boolean` | `true` | Open link in new tab |
|
|
76
|
-
| `backgroundColor` | `string` | - | Custom background (overrides theme) |
|
|
77
|
-
| `textColor` | `string` | - | Custom text color (overrides theme) |
|
|
78
|
-
| `accentColor` | `string` | - | Custom accent color |
|
|
79
|
-
| `borderRadius` | `number \| string` | - | Custom border radius |
|
|
80
|
-
| `disableImpressionTracking` | `boolean` | `false` | Disable auto impression tracking |
|
|
81
|
-
| `onClick` | `() => void` | - | Custom click handler |
|
|
82
|
-
| `onImpression` | `() => void` | - | Callback when impression fires |
|
|
83
|
-
| `onClickTracked` | `() => void` | - | Callback when click is tracked |
|
|
84
|
-
|
|
85
|
-
### `<AdText />`
|
|
86
|
-
|
|
87
|
-
A minimal text-only component for full styling control.
|
|
88
|
-
|
|
89
|
-
```tsx
|
|
90
|
-
import { AdText } from '@gravity-ai/react';
|
|
91
|
-
|
|
92
|
-
<AdText
|
|
93
|
-
ad={adResponse}
|
|
94
|
-
className="my-custom-class"
|
|
95
|
-
style={{ color: 'blue' }}
|
|
96
|
-
/>
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
#### Props
|
|
100
|
-
|
|
101
|
-
| Prop | Type | Default | Description |
|
|
102
|
-
|------|------|---------|-------------|
|
|
103
|
-
| `ad` | `Ad \| null` | required | A single ad object (e.g., `response.ads[0]`) |
|
|
104
|
-
| `className` | `string` | - | Custom class name |
|
|
105
|
-
| `style` | `CSSProperties` | - | Custom inline styles |
|
|
106
|
-
| `fallback` | `ReactNode` | `null` | Content when ad is null |
|
|
107
|
-
| `openInNewTab` | `boolean` | `true` | Open link in new tab |
|
|
108
|
-
| `disableImpressionTracking` | `boolean` | `false` | Disable auto tracking |
|
|
109
|
-
| `onClick` | `() => void` | - | Custom click handler |
|
|
110
|
-
| `onImpression` | `() => void` | - | Callback on impression |
|
|
111
|
-
| `onClickTracked` | `() => void` | - | Callback on click |
|
|
112
|
-
|
|
113
|
-
## Hooks
|
|
114
|
-
|
|
115
|
-
### `useAdTracking`
|
|
116
|
-
|
|
117
|
-
For building custom ad components with automatic tracking.
|
|
118
|
-
|
|
119
|
-
```tsx
|
|
120
|
-
import { useAdTracking } from '@gravity-ai/react';
|
|
121
|
-
|
|
122
|
-
function CustomAdComponent({ ad }) {
|
|
123
|
-
const { handleClick } = useAdTracking({
|
|
124
|
-
ad,
|
|
125
|
-
onImpression: () => console.log('Viewed'),
|
|
126
|
-
onClickTracked: () => console.log('Clicked'),
|
|
127
|
-
});
|
|
128
|
-
|
|
129
|
-
return (
|
|
130
|
-
<a href={ad.clickUrl} onClick={handleClick}>
|
|
131
|
-
{ad.adText}
|
|
132
|
-
</a>
|
|
133
|
-
);
|
|
134
|
-
}
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
## Theming Examples
|
|
138
|
-
|
|
139
|
-
### Dark Theme
|
|
140
|
-
```tsx
|
|
141
|
-
<AdBanner ad={ad} theme="dark" />
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
### Custom Colors
|
|
145
|
-
```tsx
|
|
146
|
-
<AdBanner
|
|
147
|
-
ad={ad}
|
|
148
|
-
backgroundColor="#1e1b4b"
|
|
149
|
-
textColor="#e0e7ff"
|
|
150
|
-
accentColor="#818cf8"
|
|
151
|
-
/>
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
### Minimal (Inherit Parent Styles)
|
|
155
|
-
```tsx
|
|
156
|
-
<AdBanner ad={ad} theme="minimal" showLabel={false} />
|
|
157
|
-
```
|
|
158
|
-
|
|
159
|
-
## TypeScript
|
|
160
|
-
|
|
161
|
-
Full TypeScript support with exported types:
|
|
162
|
-
|
|
163
|
-
```tsx
|
|
164
|
-
import type { Ad, AdBannerProps, AdTheme, AdSize } from '@gravity-ai/react';
|
|
165
|
-
```
|
|
17
|
+
**[https://www.trygravity.ai/api](https://www.trygravity.ai/api)**
|
|
166
18
|
|
|
167
19
|
## License
|
|
168
20
|
|
|
169
21
|
MIT
|
|
170
|
-
|