f23cdc47ee
* docs: migrating existing docs to docosaraus :) * log broken links * lint :p * fix * divide the doc into diff categories * fix * order sidebars and more * fix lint * point to installation * making docs better :) * fix * renaming git * renaming git * fix links * fix * update readme * fix * resolve duplicate url and make /docs as base url * fix * move main docs as well * making docs better * support mdx * update og * fix title * upgrade docusarus to stable version * use draculla theme * fix * make entire sidebar collapsable * live editor for footer wohoo * render excalidraw only on client to fix the prod build * migrate MainMenu to live editor too :) * lint :p * cleanup integration and use live editor and tabs * fix * Add welcome screen doc * Live Collaboration comp docs * Add collaborator example * Add example * add more * remove isCollaborating * Rewrite ref and move to sidebar * change color of links inside pre * add initial data * fix lint * Add styling * fix lint * Add example for customizing styles * fix lint * fix * fix lint * Add link to livecollabtrigger * fix * rewrite UIOptions to sidebar * move initialdata to sidebar * move render props to sidebar and rewrite renderTopRightUI and renderCustomStats * rewrite renderSidebar * update og * update url for testing * fix url * update readme * fix style * tweaks * Add highlight comp to highlight text * Add bash syntax highlight * fix * tweaks * fix * rewrite export utilities * fix restore * rewrite utils * move constants to sidebar * update readme * add copyright * fix links style * Add linkedin * tweaks * rename package to @excalidraw/excalidraw * enable algolia with dummy creds * tweaks to integration doc * tweak WelcomeScreen docs to reflect upcoming API changes * tweak components intro * tweak nomenclature * fix admonition * rename `components` sidebar item and change order of components list * uncollapse package section in sidebar * show level 4 haeadings in TOC * remove algolia * remove unused assets * capitalize C * tweak * rename components to App * rename components -> children-components in the routes * move notable used tools to intro * update MainMenu docs with `onSelect` preventDefault behavior * change sidebar label for children components * use code * tweak README & docs intro * tweak package development doc * make scrollbar gutter stable * tweak api intro * add admonition for export utils * use next * wip * wip * make excalidraw examples use current color theme & prefer system * fix welcomescreen docs * use latest temp release * fix component order * revert wip changes * use next * tweak * increase height to fix welcome screen hint * tweak editor height * update excal version * wrap Excal with forwardRef to fix refs * migrate contributing.md * fix broken links --------- Co-authored-by: dwelle <luzar.david@gmail.com>
130 lines
3.1 KiB
Plaintext
130 lines
3.1 KiB
Plaintext
# Integration
|
|
|
|
## Module bundler
|
|
|
|
If you are using a module bundler (for instance, Webpack), you can import it as an ES6 module as shown below
|
|
|
|
```js
|
|
import { Excalidraw } from "@excalidraw/excalidraw";
|
|
```
|
|
|
|
:::info
|
|
|
|
Throughout the documentation we use live, editable Excalidraw examples like the one shown below.
|
|
|
|
While we aim for the examples to closely reflect what you'd get if you rendered it yourself, we actually initialize it with some props behind the scenes.
|
|
For example, we're passing a `theme` prop to it based on the current color theme of the docs you're just reading.
|
|
|
|
:::
|
|
|
|
```jsx live
|
|
function App() {
|
|
return (
|
|
<>
|
|
<h1 style={{ textAlign: "center" }}>Excalidraw Example</h1>
|
|
<div style={{ height: "500px" }}>
|
|
<Excalidraw />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Rendering Excalidraw only on client
|
|
|
|
Since _Excalidraw_ doesn't support server side rendering, you should render the component once the host is `mounted`.
|
|
|
|
```jsx showLineNumbers
|
|
import { useState, useEffect } from "react";
|
|
export default function App() {
|
|
const [Comp, setComp] = useState(null);
|
|
useEffect(() => {
|
|
import("@excalidraw/excalidraw").then((comp) => setComp(comp.default));
|
|
}, []);
|
|
return <>{Comp && <Comp />}</>;
|
|
}
|
|
```
|
|
|
|
The `types` are available at `@excalidraw/excalidraw/types`, you can view [example for typescript](https://codesandbox.io/s/excalidraw-types-9h2dm)
|
|
|
|
## Browser
|
|
|
|
To use it in a browser directly:
|
|
|
|
For development use :point_down:
|
|
|
|
```js
|
|
<script
|
|
type="text/javascript"
|
|
src="https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.development.js"
|
|
></script>
|
|
```
|
|
|
|
For production use :point_down:
|
|
|
|
```js
|
|
<script
|
|
type="text/javascript"
|
|
src="https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.production.min.js"
|
|
></script>
|
|
```
|
|
|
|
You will need to make sure `react`, `react-dom` is available as shown in the below example. For prod please use the production versions of `react`, `react-dom`.
|
|
|
|
import Tabs from "@theme/Tabs";
|
|
import TabItem from "@theme/TabItem";
|
|
|
|
<Tabs>
|
|
<TabItem value="html" label="html">
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Excalidraw in browser</title>
|
|
<meta charset="UTF-8" />
|
|
<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
|
|
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
|
|
|
|
<script
|
|
type="text/javascript"
|
|
src="https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.development.js"
|
|
></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1>Excalidraw Embed Example</h1>
|
|
<div id="app"></div>
|
|
</div>
|
|
<script type="text/javascript" src="src/index.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
</TabItem>
|
|
<TabItem value="js" label="Javascript">
|
|
|
|
```js showLineNumbers
|
|
const App = () => {
|
|
return React.createElement(
|
|
React.Fragment,
|
|
null,
|
|
React.createElement(
|
|
"div",
|
|
{
|
|
style: { height: "500px" },
|
|
},
|
|
React.createElement(ExcalidrawLib.Excalidraw),
|
|
),
|
|
);
|
|
};
|
|
|
|
const excalidrawWrapper = document.getElementById("app");
|
|
const root = ReactDOM.createRoot(excalidrawWrapper);
|
|
root.render(React.createElement(App));
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|