@vettly/react 0.1.17 → 0.1.19
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 +48 -5
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,6 +1,41 @@
|
|
|
1
1
|
# @vettly/react
|
|
2
2
|
|
|
3
|
-
React components
|
|
3
|
+
React components for UGC moderation. Real-time policy feedback, decision tracking, and moderated uploads.
|
|
4
|
+
|
|
5
|
+
## UGC Moderation Essentials
|
|
6
|
+
|
|
7
|
+
Apps with user-generated content need four things to stay compliant and keep users safe. This package handles the client-side UX for content filtering and audit trails — pair with `@vettly/sdk` on the server for reporting and blocking:
|
|
8
|
+
|
|
9
|
+
| Requirement | React Integration |
|
|
10
|
+
|-------------|-------------------|
|
|
11
|
+
| **Content filtering** | `<ModeratedTextarea>`, `<ModeratedImageUpload>`, `<ModeratedVideoUpload>` |
|
|
12
|
+
| **User reporting** | Pair with server-side SDK (`POST /v1/reports`) |
|
|
13
|
+
| **User blocking** | Pair with server-side SDK (`POST /v1/blocks`) |
|
|
14
|
+
| **Audit trail** | Every check returns `decisionId` — store it with your content |
|
|
15
|
+
|
|
16
|
+
### React Native / Expo
|
|
17
|
+
|
|
18
|
+
```typescript
|
|
19
|
+
import { useModeration } from '@vettly/react'
|
|
20
|
+
|
|
21
|
+
function CommentInput() {
|
|
22
|
+
const { result, check } = useModeration({
|
|
23
|
+
apiKey: 'vettly_live_...',
|
|
24
|
+
policyId: 'app-store',
|
|
25
|
+
})
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<TextInput
|
|
29
|
+
onChangeText={(text) => check(text)}
|
|
30
|
+
style={{
|
|
31
|
+
borderColor: result.action === 'block' ? 'red' : 'green'
|
|
32
|
+
}}
|
|
33
|
+
/>
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
> **Note:** Client-side moderation improves UX but is not a security boundary. Always validate on the server before persisting content.
|
|
4
39
|
|
|
5
40
|
## Why Client-Side Moderation?
|
|
6
41
|
|
|
@@ -57,7 +92,7 @@ A textarea with real-time content moderation and visual feedback.
|
|
|
57
92
|
```tsx
|
|
58
93
|
<ModeratedTextarea
|
|
59
94
|
// Required
|
|
60
|
-
apiKey="
|
|
95
|
+
apiKey="vettly_live_..."
|
|
61
96
|
policyId="community-safe"
|
|
62
97
|
|
|
63
98
|
// Content
|
|
@@ -125,7 +160,7 @@ Image upload component with pre-upload moderation.
|
|
|
125
160
|
```tsx
|
|
126
161
|
<ModeratedImageUpload
|
|
127
162
|
// Required
|
|
128
|
-
apiKey="
|
|
163
|
+
apiKey="vettly_live_..."
|
|
129
164
|
policyId="strict"
|
|
130
165
|
|
|
131
166
|
// Callbacks
|
|
@@ -194,7 +229,7 @@ Video upload with frame extraction and moderation.
|
|
|
194
229
|
```tsx
|
|
195
230
|
<ModeratedVideoUpload
|
|
196
231
|
// Required
|
|
197
|
-
apiKey="
|
|
232
|
+
apiKey="vettly_live_..."
|
|
198
233
|
policyId="video-policy"
|
|
199
234
|
|
|
200
235
|
// Callbacks
|
|
@@ -277,7 +312,7 @@ import { useModeration } from '@vettly/react'
|
|
|
277
312
|
|
|
278
313
|
function CustomModerationUI() {
|
|
279
314
|
const { result, check } = useModeration({
|
|
280
|
-
apiKey: '
|
|
315
|
+
apiKey: 'vettly_live_...',
|
|
281
316
|
policyId: 'community-safe',
|
|
282
317
|
debounceMs: 500,
|
|
283
318
|
enabled: true,
|
|
@@ -578,6 +613,14 @@ export async function POST(req) {
|
|
|
578
613
|
|
|
579
614
|
---
|
|
580
615
|
|
|
616
|
+
## Get Your API Key
|
|
617
|
+
|
|
618
|
+
1. Sign up at [vettly.dev](https://vettly.dev)
|
|
619
|
+
2. Go to Dashboard > API Keys
|
|
620
|
+
3. Create and copy your **publishable key** (`vettly_live_...`) for client-side use
|
|
621
|
+
|
|
622
|
+
---
|
|
623
|
+
|
|
581
624
|
## Links
|
|
582
625
|
|
|
583
626
|
- [vettly.dev](https://vettly.dev) - Sign up
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vettly/react",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "React components for content moderation. ModeratedTextarea, ImageUpload, and VideoUpload with
|
|
3
|
+
"version": "0.1.19",
|
|
4
|
+
"description": "React components for content moderation. ModeratedTextarea, ImageUpload, and VideoUpload with built-in content moderation.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"license": "MIT",
|
|
42
42
|
"repository": {
|
|
43
43
|
"type": "git",
|
|
44
|
-
"url": "https://github.com/nextauralabs/vettly
|
|
44
|
+
"url": "https://github.com/nextauralabs/vettly.git",
|
|
45
45
|
"directory": "packages/react"
|
|
46
46
|
},
|
|
47
47
|
"homepage": "https://vettly.dev",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"access": "public"
|
|
50
50
|
},
|
|
51
51
|
"bugs": {
|
|
52
|
-
"url": "https://github.com/nextauralabs/vettly
|
|
52
|
+
"url": "https://github.com/nextauralabs/vettly/issues"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
55
|
"react": "^18.0.0",
|