# @arkondata/react-bpmn-modeler > React bpmn modeler Latest version **0.1.22** (published 2020-06-07) · MIT license · 0 weekly downloads ## Install ```sh npm install @arkondata/react-bpmn-modeler pnpm add @arkondata/react-bpmn-modeler yarn add @arkondata/react-bpmn-modeler bun add @arkondata/react-bpmn-modeler ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.22 | | Published | 2020-06-07 | | First published | 2020-05-20 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 15 | | Unpacked size | 475.6 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 10 | | Author | JavierMolina | | Maintainers | javiermolina, juananto11, rreyes24, services_arkondata | | Keywords | react-bpmn-modeler | ## Links - npm: https://www.npmjs.com/package/@arkondata/react-bpmn-modeler - Repository: https://github.com/Grupo-Abraxas/react-bpmn-modeler - Homepage: https://www.arkondata.com - Issues: https://github.com/Grupo-Abraxas/react-bpmn-modeler/issues - npm.io page: https://npm.io/package/@arkondata/react-bpmn-modeler ## Dependencies (15) - [react](https://npm.io/package/react.md) ^16.13.1 - [bpmn-js](https://npm.io/package/bpmn-js.md) ^6.4.2 - [node-sass](https://npm.io/package/node-sass.md) ^4.14.1 - [react-dom](https://npm.io/package/react-dom.md) ^16.13.1 - [css-loader](https://npm.io/package/css-loader.md) ^3.5.2 - [style-loader](https://npm.io/package/style-loader.md) ^1.1.4 - [yarn-run-all](https://npm.io/package/yarn-run-all.md) ^3.1.1 - [react-scripts](https://npm.io/package/react-scripts.md) 3.4.1 - [react-full-screen](https://npm.io/package/react-full-screen.md) ^0.2.4 - [diagram-js-minimap](https://npm.io/package/diagram-js-minimap.md) ^2.0.3 - [camunda-bpmn-moddle](https://npm.io/package/camunda-bpmn-moddle.md) ^4.4.0 - [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^9.3.2 - [bpmn-js-properties-panel](https://npm.io/package/bpmn-js-properties-panel.md) ^0.33.2 - [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^4.2.4 - [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^7.1.2 ## Recent versions - 0.1.22 (latest) — 2020-06-07 - 0.1.24-beta.14 (beta) — 2020-07-14 - 0.1.24-beta.13 — 2020-07-10 - 0.1.24-beta.12 — 2020-07-09 - 0.1.24-beta.11 — 2020-07-09 - 0.1.24-beta.10 — 2020-07-09 - 0.1.24-beta.9 — 2020-07-07 - 0.1.24-beta8 — 2020-07-07 - 0.1.24-beta.7 — 2020-07-06 - 0.1.24-beta.6 — 2020-07-06 - 0.1.24-beta.5 — 2020-07-06 - 0.1.24-beta.4 — 2020-07-06 - 0.1.24-beta.3 — 2020-06-25 - 0.1.24-beta.2 — 2020-06-25 - 0.1.24-beta.1 — 2020-06-25 - … 23 more at https://npm.io/package/@arkondata/react-bpmn-modeler/versions ## README # react-bpmn-modeler # React bpmn modeler (Beta) ## How to install ## With npm ```bash npm install @arkondata/react-bpmn-modeler ``` With yarn ```bash yarn add @arkondata/react-bpmn-modeler ``` ## How to use ## With React Typescript ```tsx import React, { FC, useRef, MutableRefObject, Fragment } from 'react' import { Bpmn, BpmnModelerType } from '@arkondata/react-bpmn-modeler/lib/components' const App: FC = () => { const modelerRef: MutableRefObject = useRef() const bpmnModelerRef: MutableRefObject = useRef( alert(xml)} onTaskTarget={(event: CustomEvent): void => alert(JSON.stringify(event.detail))} onTaskLabelTarget={(event: CustomEvent): void => { // Set an element programmatically const modeling = modelerRef?.current?.get('modeling') const elementRegistry = modelerRef?.current?.get('elementRegistry') const element = elementRegistry.get(event.detail.id) modeling.updateProperties(element, { name: 'Example task label' }) }} onError={(error: Error): void => alert(error)} /> ) return ( {bpmnModelerRef.current} ) } export default App ``` With React ```jsx import React, { FC, useRef } from 'react' import { Bpmn } from '@arkondata/react-bpmn-modeler/lib/components' const App: FC = () => { const modelerRef = useRef() const bpmnModelerRef = useRef( alert(xml)} onTaskTarget={event => alert(JSON.stringify(event.detail))} onTaskLabelTarget={event => { // Set an element programmatically const modeling = modelerRef.current.get('modeling') const elementRegistry = modelerRef.current.get('elementRegistry') const element = elementRegistry.get(event.detail.id) modeling.updateProperties(element, { name: 'Example task label' }) }} onError={error => alert(error)} /> ) return ( {bpmnModelerRef.current} ) } export default App ``` ## Params ## * **modelerRef:** It's the reference to the "div" of the "container" of the bpmn modeler. **\*** * **bpmnStringFile:** A .bpmn file in text string, if not provided an empty .bpmn file will be generated. **\*** * **modelerInnerHeight:** Window height setting, if not provided, takes the size of the current window by default. * **actionButtonClassName:** React className of action button. * **zStep:** Number of zoom step of zoom in/out action button. * **onElementChange:** A function that runs every time a bpmn modeler element changes, accepts as a parameter a variable that contains the exported file in a text string. * **onTaskTarget:** It is a function that is executed when you click on the gear icon in the side pad of a task element, it accepts a function that receives as event parameter of the selected element. **\*** *event.detail* returns ```typescript { id: string $type: string $parent: { id: string $type: string } } ``` * **onTaskLabelTarget:** It is a function that is executed when you click on the document icon in the side pad of a task element, it accepts a function that receives as event parameter of the selected element. **\*** *event.detail* returns ```typescript { id: string $type: string $parent: { id: string $type: string } } ``` * **onError:** It is executed in case of error, it accepts a function that receives the error as a parameter. **\*** *Required params* * --- _Source: https://npm.io/package/@arkondata/react-bpmn-modeler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._