qureal-editor 1.0.32 → 1.0.34
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 +93 -44
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,44 +4,104 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
## Install
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
|
|
9
|
+
#### Installation
|
|
10
|
+
|
|
11
|
+
```shell
|
|
12
|
+
npm install qureal-editor@latest
|
|
11
13
|
```
|
|
12
14
|
|
|
13
|
-
## Usage
|
|
14
15
|
|
|
16
|
+
### QurealViewer
|
|
17
|
+
|
|
18
|
+
To integrate single creation (creation or template)
|
|
19
|
+
|
|
20
|
+
| prop | description | default |
|
|
21
|
+
| ------------- | ---------------------------------- | ------------ |
|
|
22
|
+
| type | `creation` or `template` | `creation` |
|
|
23
|
+
| slug | actual slug | - |
|
|
24
|
+
| organization | organization id | - |
|
|
25
|
+
| person | person id | - |
|
|
26
|
+
| prefill | prefill json | {} |
|
|
27
|
+
| style | wrapper style | {} |
|
|
28
|
+
| onFormSubmit | callback for form submit with data | - |
|
|
29
|
+
| preview | open in preview mode | false |
|
|
30
|
+
| fit | zoom 100% | true |
|
|
31
|
+
| background | overwrite background color | black |
|
|
32
|
+
| creation_type | `singlepage` , `document` etc. | `singlepage` |
|
|
33
|
+
#### Example
|
|
15
34
|
```jsx
|
|
16
|
-
|
|
17
|
-
|
|
35
|
+
<QurealViewer
|
|
36
|
+
type="creation"
|
|
37
|
+
slug="singlepage_2iByO"
|
|
38
|
+
organization="list_app_7PVDB"
|
|
39
|
+
preview={false}
|
|
40
|
+
fit={true}
|
|
41
|
+
background="aliceblue"
|
|
42
|
+
prefill={{
|
|
43
|
+
user: {
|
|
44
|
+
name: "Hello Name",
|
|
45
|
+
city: "Pipariya"
|
|
46
|
+
},
|
|
47
|
+
ai_model: {
|
|
48
|
+
model: "e9c8b5c4-4a2f-4c15-85a4-a57669a00999"
|
|
49
|
+
}
|
|
50
|
+
}}
|
|
51
|
+
onFormSubmit={(form_data) => {
|
|
52
|
+
console.log("Data filled in form", form_data);
|
|
53
|
+
}}
|
|
54
|
+
style={{
|
|
55
|
+
width: "1100px",
|
|
56
|
+
height: "90vh",
|
|
57
|
+
border: "1px solid black",
|
|
58
|
+
borderRadius: "10px",
|
|
59
|
+
}}
|
|
60
|
+
/>
|
|
61
|
+
```
|
|
18
62
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
### QurealCollection
|
|
66
|
+
|
|
67
|
+
To integrate a collection (collection of creations / templates)
|
|
68
|
+
|
|
69
|
+
| prop | description | default |
|
|
70
|
+
| ------------ | --------------- | ------- |
|
|
71
|
+
| id | collection id | - |
|
|
72
|
+
| organization | organization id | - |
|
|
73
|
+
| person | person id | - |
|
|
74
|
+
| prefill | prefill json | - |
|
|
75
|
+
| | | |
|
|
76
|
+
#### Example
|
|
77
|
+
```jsx
|
|
78
|
+
<QurealCollection
|
|
79
|
+
collection_id="934ffe42-1d0a-4fa0-ad23-60b066c0b9ab"
|
|
80
|
+
organization="qureal@qureal.com"
|
|
81
|
+
background="black"
|
|
82
|
+
style={{
|
|
83
|
+
width: "1100px",
|
|
84
|
+
height: "40vh",
|
|
85
|
+
border: "1px solid black",
|
|
86
|
+
borderRadius: "10px",
|
|
87
|
+
}}
|
|
88
|
+
/>
|
|
40
89
|
```
|
|
41
90
|
|
|
42
|
-
For efficieny in case of multiple creations rendering, do not destroy the component, just update slug prop.
|
|
43
91
|
|
|
44
|
-
|
|
92
|
+
### useQurealActions
|
|
93
|
+
|
|
94
|
+
To perform action on currently opened creation in `QurealViewer` or `QurealCollection`
|
|
95
|
+
|
|
96
|
+
| returned_value | description |
|
|
97
|
+
| -------------- | ---------------------------------------------------- |
|
|
98
|
+
| actionRef | pass it to `QurealViewer` or `QurealCollection` |
|
|
99
|
+
| download | function to download current opened creation |
|
|
100
|
+
| share | function to trigger share event for current creation |
|
|
101
|
+
| next | function to open next creation in `QurealCollection` |
|
|
102
|
+
| prev | function to open prev creation in `QurealColection` |
|
|
103
|
+
| | |
|
|
104
|
+
#### Example
|
|
45
105
|
```jsx
|
|
46
106
|
import React from "react";
|
|
47
107
|
import { QurealViewer, useQurealActions } from "qureal-editor";
|
|
@@ -55,26 +115,15 @@ function App() {
|
|
|
55
115
|
<button onClick={share}>Share</button>
|
|
56
116
|
<QurealViewer
|
|
57
117
|
slug="test_21"
|
|
58
|
-
actionRef={actionRef}
|
|
118
|
+
actionRef={actionRef}
|
|
59
119
|
/>
|
|
60
120
|
</div>
|
|
61
121
|
);
|
|
62
122
|
}
|
|
63
123
|
```
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
| Prop | Description | Default value |
|
|
69
|
-
| --- | --- | --- |
|
|
70
|
-
| slug | required, slug of the creation / template id | - |
|
|
71
|
-
| prefill | optional, data to be prefilled in the creation | {} |
|
|
72
|
-
| onFormSubmit | optional, callback function when form is submitted | (data)=> {} |
|
|
73
|
-
| preview | preview mode | true |
|
|
74
|
-
| fit | zoom 100% | false |
|
|
75
|
-
| organization | Qureal organization id | null |
|
|
76
|
-
| person | Qureal person id | null |
|
|
77
|
-
| background | overwrite background color | null |
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
78
127
|
|
|
79
128
|
## License
|
|
80
129
|
|