|
|
@@ -125,22 +125,22 @@ export default function App() {
|
|
125
|
125
|
|
|
126
|
126
|
### Props
|
|
127
|
127
|
|
|
128
|
|
-| Name | Type | Default | Description |
|
|
129
|
|
-| --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
130
|
|
-| [`width`](#width) | Number | `window.innerWidth` | The width of Excalidraw component |
|
|
131
|
|
-| [`height`](#height) | Number | `window.innerHeight` | The height of Excalidraw component |
|
|
132
|
|
-| [`offsetLeft`](#offsetLeft) | Number | `0` | left position relative to which Excalidraw should be rendered |
|
|
133
|
|
-| [`offsetTop`](#offsetTop) | Number | `0` | top position relative to which Excalidraw should render |
|
|
134
|
|
-| [`onChange`](#onChange) | Function | | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw elements and the current app state. |
|
|
135
|
|
-| [`initialData`](#initialData) | <pre>{elements?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>, appState?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37">AppState<a> } </pre> | null | The initial data with which app loads. |
|
|
136
|
|
-| [`user`](#user) | `{ name?: string }` | | User details. The name refers to the name of the user to be shown |
|
|
137
|
|
-| [`excalidrawRef`](#excalidrawRef) | [`createRef`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) or [`callbackRef`](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) or <pre>{ current: { readyPromise: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317">resolvablePromise</a> } }</pre> | | Ref to be passed to Excalidraw |
|
|
138
|
|
-| [`onCollabButtonClick`](#onCollabButtonClick) | Function | | Callback to be triggered when the collab button is clicked |
|
|
139
|
|
-| [`isCollaborating`](#isCollaborating) | `boolean` | | This implies if the app is in collaboration mode |
|
|
140
|
|
-| [`onPointerUpdate`](#onPointerUpdate) | Function | | Callback triggered when mouse pointer is updated. |
|
|
141
|
|
-| [`onExportToBackend`](#onExportToBackend) | Function | | Callback triggered when link button is clicked on export dialog |
|
|
142
|
|
-| [`langCode`](#langCode) | string | `en` | Language code string |
|
|
143
|
|
-| [`renderFooter `](#renderFooter) | Function | | Function that renders custom UI footer |
|
|
|
128
|
+| Name | Type | Default | Description |
|
|
|
129
|
+| --- | --- | --- | --- |
|
|
|
130
|
+| [`width`](#width) | Number | `window.innerWidth` | The width of Excalidraw component |
|
|
|
131
|
+| [`height`](#height) | Number | `window.innerHeight` | The height of Excalidraw component |
|
|
|
132
|
+| [`offsetLeft`](#offsetLeft) | Number | `0` | left position relative to which Excalidraw should be rendered |
|
|
|
133
|
+| [`offsetTop`](#offsetTop) | Number | `0` | top position relative to which Excalidraw should render |
|
|
|
134
|
+| [`onChange`](#onChange) | Function | | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw elements and the current app state. |
|
|
|
135
|
+| [`initialData`](#initialData) | <pre>{elements?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>, appState?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37">AppState<a> } </pre> | null | The initial data with which app loads. |
|
|
|
136
|
+| [`user`](#user) | `{ name?: string }` | | User details. The name refers to the name of the user to be shown |
|
|
|
137
|
+| [`excalidrawRef`](#excalidrawRef) | [`createRef`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) or [`callbackRef`](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) or <pre>{ current: { readyPromise: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317">resolvablePromise</a> } }</pre> | | Ref to be passed to Excalidraw |
|
|
|
138
|
+| [`onCollabButtonClick`](#onCollabButtonClick) | Function | | Callback to be triggered when the collab button is clicked |
|
|
|
139
|
+| [`isCollaborating`](#isCollaborating) | `boolean` | | This implies if the app is in collaboration mode |
|
|
|
140
|
+| [`onPointerUpdate`](#onPointerUpdate) | Function | | Callback triggered when mouse pointer is updated. |
|
|
|
141
|
+| [`onExportToBackend`](#onExportToBackend) | Function | | Callback triggered when link button is clicked on export dialog |
|
|
|
142
|
+| [`langCode`](#langCode) | string | `en` | Language code string |
|
|
|
143
|
+| [`renderFooter `](#renderFooter) | Function | | Function that renders custom UI footer |
|
|
144
|
144
|
|
|
145
|
145
|
#### `width`
|
|
146
|
146
|
|
|
|
@@ -174,13 +174,12 @@ Here you can try saving the data to your backend or local storage for example.
|
|
174
|
174
|
|
|
175
|
175
|
#### `initialData`
|
|
176
|
176
|
|
|
177
|
|
-This helps to load Excalidraw with `initialData`.
|
|
178
|
|
-It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
|
|
|
177
|
+This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
|
|
179
|
178
|
|
|
180
|
|
-| name | type |
|
|
181
|
|
-| -------- | ----------------------------------------------------------------------------------------------------- |
|
|
|
179
|
+| name | type |
|
|
|
180
|
+| --- | --- |
|
|
182
|
181
|
| elements | [ExcalidrawElement []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78) |
|
|
183
|
|
-| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37) |
|
|
|
182
|
+| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37) |
|
|
184
|
183
|
|
|
185
|
184
|
```json
|
|
186
|
185
|
{
|
|
|
@@ -219,19 +218,18 @@ This is the user name which shows during collaboration. Defaults to `{name: ''}`
|
|
219
|
218
|
|
|
220
|
219
|
#### `excalidrawRef`
|
|
221
|
220
|
|
|
222
|
|
-You can pass a `ref` when you want to access some excalidraw APIs.
|
|
223
|
|
-We expose the below APIs:
|
|
|
221
|
+You can pass a `ref` when you want to access some excalidraw APIs. We expose the below APIs:
|
|
224
|
222
|
|
|
225
|
|
-| API | signature | Usage |
|
|
226
|
|
-| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
227
|
|
-| ready | `boolean` | This is set to true once Excalidraw is rendered |
|
|
228
|
|
-| readyPromise | [resolvablePromise](https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317) | This promise will be resolved with the api once excalidraw has rendered. This will be helpful when you want do some action on the host app once this promise resolves. For this to work you will have to pass ref as shown [here](#readyPromise) |
|
|
229
|
|
-| updateScene | <pre>(<a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L189">sceneData</a>)) => void </pre> | updates the scene with the sceneData |
|
|
230
|
|
-| resetScene | `({ resetLoadingState: boolean }) => void` | Resets the scene. If `resetLoadingState` is passed as true then it will also force set the loading state to false. |
|
|
231
|
|
-| getSceneElementsIncludingDeleted | <pre> () => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement []</a></pre> | Returns all the elements including the deleted in the scene |
|
|
232
|
|
-| getSceneElements | <pre> () => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement []</a></pre> | Returns all the elements excluding the deleted in the scene |
|
|
233
|
|
-| history | `{ clear: () => void }` | This is the history API. `history.clear()` will clear the history |
|
|
234
|
|
-| setScrollToCenter | <pre> (<a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>) => void </pre> | sets the elements to center |
|
|
|
223
|
+| API | signature | Usage |
|
|
|
224
|
+| --- | --- | --- |
|
|
|
225
|
+| ready | `boolean` | This is set to true once Excalidraw is rendered |
|
|
|
226
|
+| readyPromise | [resolvablePromise](https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317) | This promise will be resolved with the api once excalidraw has rendered. This will be helpful when you want do some action on the host app once this promise resolves. For this to work you will have to pass ref as shown [here](#readyPromise) |
|
|
|
227
|
+| updateScene | <pre>(<a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L189">sceneData</a>)) => void </pre> | updates the scene with the sceneData |
|
|
|
228
|
+| resetScene | `({ resetLoadingState: boolean }) => void` | Resets the scene. If `resetLoadingState` is passed as true then it will also force set the loading state to false. |
|
|
|
229
|
+| getSceneElementsIncludingDeleted | <pre> () => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement []</a></pre> | Returns all the elements including the deleted in the scene |
|
|
|
230
|
+| getSceneElements | <pre> () => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement []</a></pre> | Returns all the elements excluding the deleted in the scene |
|
|
|
231
|
+| history | `{ clear: () => void }` | This is the history API. `history.clear()` will clear the history |
|
|
|
232
|
+| setScrollToCenter | <pre> (<a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>) => void </pre> | sets the elements to center |
|
|
235
|
233
|
|
|
236
|
234
|
#### `readyPromise`
|
|
237
|
235
|
|
|
|
@@ -275,17 +273,16 @@ This callback is triggered when the shareable-link button is clicked in the expo
|
|
275
|
273
|
|
|
276
|
274
|
#### `langCode`
|
|
277
|
275
|
|
|
278
|
|
-Determines the language of the UI. It should be one of the [available language codes](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L14). Defaults to `en` (English).
|
|
279
|
|
-We also export default language and supported languages which you can import as shown below.
|
|
|
276
|
+Determines the language of the UI. It should be one of the [available language codes](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L14). Defaults to `en` (English). We also export default language and supported languages which you can import as shown below.
|
|
280
|
277
|
|
|
281
|
278
|
```js
|
|
282
|
279
|
import { defaultLang, languages } from "@excalidraw/excalidraw";
|
|
283
|
280
|
```
|
|
284
|
281
|
|
|
285
|
|
-| name | type |
|
|
286
|
|
-| ----------- | ---------------------------------------------------------------------------------- |
|
|
287
|
|
-| defaultLang | string |
|
|
288
|
|
-| languages | [Language []](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L8) |
|
|
|
282
|
+| name | type |
|
|
|
283
|
+| --- | --- |
|
|
|
284
|
+| defaultLang | string |
|
|
|
285
|
+| languages | [Language []](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L8) |
|
|
289
|
286
|
|
|
290
|
287
|
#### `renderFooter`
|
|
291
|
288
|
|
Carl Sverre
4 years ago