@picked/react 0.0.101-next.2 → 0.0.101
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 +50 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# @picked/react
|
|
2
|
+
|
|
3
|
+
Renders Picked experiences with React components, and reads the client from React through
|
|
4
|
+
hooks and components.
|
|
5
|
+
|
|
6
|
+
## Install
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install picked @picked/react
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Supports React 18.3 and 19.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import { createClient } from 'picked'
|
|
18
|
+
import { adaptReactComponent } from '@picked/react'
|
|
19
|
+
import { reactFrameworkPlugin } from '@picked/react/plugins/framework'
|
|
20
|
+
import { dynamicExperiencesPlugin } from '@picked/client/plugins/dynamic-experiences'
|
|
21
|
+
import { MyWidget } from './MyWidget'
|
|
22
|
+
|
|
23
|
+
export const picked = createClient({
|
|
24
|
+
projectId: 'your-project-id',
|
|
25
|
+
plugins: [reactFrameworkPlugin({ components: {} }), dynamicExperiencesPlugin()],
|
|
26
|
+
components: {
|
|
27
|
+
MyWidget: adaptReactComponent(MyWidget),
|
|
28
|
+
},
|
|
29
|
+
})
|
|
30
|
+
|
|
31
|
+
picked.start()
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
A key in `components` matches the component name of an experience in the dashboard.
|
|
35
|
+
|
|
36
|
+
| Import | Gives you |
|
|
37
|
+
| --------------------------------- | ------------------------------------------------------------------------- |
|
|
38
|
+
| `@picked/react` | `adaptReactComponent`, `PickedProvider`, `ExperienceSlot`, `HtmlRender` |
|
|
39
|
+
| `@picked/react/plugins/framework` | `reactFrameworkPlugin({ components, stylesheets?, css? })` |
|
|
40
|
+
| `@picked/react/hooks` | `useStep`, `useFeature`, `useContent`, `useReference` and the other hooks |
|
|
41
|
+
| `@picked/react/router` | `StepRouter`, `Step` |
|
|
42
|
+
| `@picked/react/form` | `useForm` |
|
|
43
|
+
| `@picked/react/server` | The server renderer for server-side rendering |
|
|
44
|
+
|
|
45
|
+
## Docs
|
|
46
|
+
|
|
47
|
+
- **Web:** [React](https://docs.picked.app/reference/sdk/react)
|
|
48
|
+
- **Local:** `node_modules/picked/docs/reference/sdk/react.md`. The `picked` package carries every page under `node_modules/picked/docs/`.
|
|
49
|
+
- **CLI:** `npx picked docs read /reference/sdk/react`. `npx picked docs list [words]` lists the pages.
|
|
50
|
+
- **MCP:** call `read_picked_doc` with `{ "path": "/reference/sdk/react" }`; `list_picked_docs` lists the pages. Add the server with `claude mcp add --transport http picked https://api.picked.app/mcp`, or see [How to connect the MCP server](https://docs.picked.app/how-to/connect-the-mcp-server) for other tools.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@picked/react",
|
|
3
|
-
"version": "0.0.101
|
|
3
|
+
"version": "0.0.101",
|
|
4
4
|
"devDependencies": {
|
|
5
5
|
"@picked/client": "workspace:*",
|
|
6
6
|
"@repo/eslint-config": "workspace:*",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"license": "SEE LICENSE IN LICENSE",
|
|
92
92
|
"module": "./dist/index.js",
|
|
93
93
|
"peerDependencies": {
|
|
94
|
-
"@picked/client": "0.0.101
|
|
94
|
+
"@picked/client": "0.0.101",
|
|
95
95
|
"effector": "^23.4.4",
|
|
96
96
|
"react": "^18.3.0 || ^19.0.0",
|
|
97
97
|
"react-dom": "^18.3.0 || ^19.0.0"
|