bpmn-io / react-bpmn Goto Github PK

View Code? Open in Web Editor NEW

184.0 13.0 66.0 592 KB

Display BPMN 2.0 diagrams in React.

License: MIT License

HTML 62.87% JavaScript 37.13%

react bpmn bpmn-js

react-bpmn's Introduction

react-bpmn

Use bpmn-js to display BPMN 2.0 diagrams in a React application.

Usage

import ReactBpmn from 'react-bpmn';


function App(props) {

  function onShown() {
    console.log('diagram shown');
  }

  function onLoading() {
    console.log('diagram loading');
  }

  function onError(err) {
    console.log('failed to show diagram');
  }

  return (
    <ReactBpmn
      url="/public/diagram.bpmn"
      onShown={ onShown }
      onLoading={ onLoading }
      onError={ onError }
    />
  );
}

Development

To get the development setup make sure to have NodeJS installed. As soon as you are set up, clone the project and execute

npm install
npm run all

Example

To run the example, execute npm run start and open http://localhost:5000/public in your Webbrowser.

Resources

License

MIT

react-bpmn's People

Contributors

Stargazers

Watchers

react-bpmn's Issues

Option to Highlight current Active Tasks

Requesting a feature to highlight what is the current tasks/activity in different color [border color, background color]

Current Id can be passed as props

React functional component example

What should we do?

Make a new example that uses React Functional component. Optional with Typescript.

Why should we do it?

React is moving away from Class based component. I already have a working example. https://github.com/joey-kwl/React-Typescript-BPMN-example

when show bpmn file have error

hello,you may forget to upload script: start?

Running the example doesn't work for me

Describe the Bug
When I run the example using the instructions, I see an empty web page instead of the viewer.

Steps to Reproduce

[~/react-bpmn/example]$ npm install

up to date, audited 36 packages in 354ms

1 high severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

[~/react-bpmn/example]$ npm start

> [email protected] start
> sirv . start --dev

  Your application is ready~! 🚀

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

  [09:15:39] 404 ─ 1.25ms ─ /
  [09:15:39] 404 ─ 0.14ms ─ /favicon.ico

Expected Behavior

I expect to see the bpm viewer.

Environment

Host Firefox 104.0.1 (64-bit), npm v8.11.0
OS: NixOS 22.05.2889.67e45078141
Library version: 0.0.0

supplied diagram likely outdated

Great little project you have put together here. Found it to be a very good starting point, so i appreciate the work you have done.

Noticed a slight hicky in your example that caused me some headaches in the start.

Was getting this error:

js failed to show diagram Error: failed to parse document as <bpmn:Definitions> at ai (bpmn-navigated-viewer.production.min.js:2) at bpmn-navigated-viewer.production.min.js:2 at new Promise (<anonymous>) at gi.fromXML (bpmn-navigated-viewer.production.min.js:2) at Li.fromXML (bpmn-navigated-viewer.production.min.js:2) at bpmn-navigated-viewer.production.min.js:23 at new Promise (<anonymous>) at Sr.<anonymous> (bpmn-navigated-viewer.production.min.js:23) at Sr.importXML (bpmn-navigated-viewer.production.min.js:2) at ReactBpmn.displayDiagram (index.esm.js:163) ...

Seems as if the referenced bpmn diagram in your example might be outdated as it breaks during parsing. From an earlier issue i found a sandbox where you referenced some other file

Seems like the diagram simply needs to be updated or swapped out for something else

Is it support other props when I want to download bpmn or trigger click event?

Is it support other props if I want to download bpmn OR trigger click event OR add one comment?
is it only have below props?

```
  url="/public/diagram.bpmn"
```
```
  onShown={ onShown }
```
```
  onLoading={ onLoading }
```
```
  onError={ onError }
```

Because My project want use BPMN and it is a React project..
Thanks so much.....

how can i setNodeColor with react ?

Module not found:Can't resolve 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js'

Failed to compile
./node_modules/react-bpmn/dist/index.esm.js

Module not found: Can't resolve 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js' in '/home/React/location/node_modules/react-bpmn/dist'

Describe the Bug

Module not Found 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js'

Steps to Reproduce

1. npm install react-bpmn in react app
2. Followed the steps mentioned in README.md
3. On running the app, i get this error

Expected Behavior

Environment

Host (Browser/Node version), if applicable: Chrome 79/node:10.16
OS: Ubuntu 18.04
Library version: 0.1.1

Doesn't work

I did follow steps:

npm install --save react-bpmn
done exactly the same steps which described in "Usage" section of readme.md
but i couldn't to see the graph editor and getting the error like on screenshot below:

Uncaught ReferenceError: ReactBpmn is not defined

Describe the Bug

Steps to Reproduce

clone code
npm install
npm start
Go to http://localhost:5000/public/index.html

Actual Behavior

Environment

Host (Browser/Node version), if applicable: [e.g. MS Edge 18, Chrome 69, Node 14.16.0 LTS]
OS: [e.g. Windows 10]

cant npm install react-bpmn

pls help me to fix this error

bpmn-io / react-bpmn Goto Github PK

react-bpmn's Introduction

react-bpmn

Usage

Development

Example

Resources

License

react-bpmn's People

Contributors

Stargazers

Watchers

Forkers

react-bpmn's Issues

What should we do?

Why should we do it?

Recommend Projects

Recommend Topics

Recommend Org