52 lines
1.2 KiB
Markdown
52 lines
1.2 KiB
Markdown
# diagram-js-ui
|
|
|
|
[](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml)
|
|
|
|
A wrapper around [`htm/preact`](https://github.com/developit/htm#usage) that exposes components for building reactive HTML widgets in the context of [diagram-js](https://github.com/bpmn-io/diagram-js) and extensions.
|
|
|
|
|
|
## Usage
|
|
|
|
This module is available through `diagram-js/lib/ui`. Use it to create and mount your [Preact](https://preactjs.com/) components and render them through the [`htm` utility](https://github.com/developit/htm).
|
|
|
|
```javascript
|
|
// MyService.js
|
|
import { render, html } from 'diagram-js/lib/ui';
|
|
import MyCounter from './MyCounter';
|
|
|
|
export default function MyService() {
|
|
const parentElement = document.createElement('div');
|
|
|
|
render(html`<${MyCounter} />`, parentElement);
|
|
}
|
|
```
|
|
|
|
```javascript
|
|
// MyCounter.js
|
|
import { useState, html } from 'diagram-js/lib/ui';
|
|
|
|
export default function MyCounter(props) {
|
|
const counter = useState(0);
|
|
|
|
return html`
|
|
<div>Counter: ${counter}</div>
|
|
`;
|
|
}
|
|
```
|
|
|
|
|
|
## Build and Run
|
|
|
|
```sh
|
|
# install all dependencies
|
|
npm install
|
|
|
|
# lint and build the library
|
|
npm run all
|
|
```
|
|
|
|
|
|
## License
|
|
|
|
MIT
|