https://github.com/bpmn-io/react-bpmn

Display BPMN 2.0 diagrams in React.
https://github.com/bpmn-io/react-bpmn

bpmn bpmn-js react

Last synced: 7 days ago
JSON representation

Display BPMN 2.0 diagrams in React.

• Host: GitHub
• URL: https://github.com/bpmn-io/react-bpmn
• Owner: bpmn-io
• License: mit
• Created: 2019-03-27T12:39:54.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2024-12-16T08:34:15.000Z (about 2 months ago)
• Last Synced: 2025-01-18T07:03:40.914Z (14 days ago)
• Topics: bpmn, bpmn-js, react
• Language: HTML
• Homepage:
• Size: 552 KB
• Stars: 196
• Watchers: 13
• Forks: 67
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-bpmn-io - react-bpmn - Render BPMN 2.0 diagrams in a [React](https://reactjs.org/) application (Integrations)

README

        
# react-bpmn

[![CI](https://github.com/bpmn-io/react-bpmn/workflows/CI/badge.svg)](https://github.com/bpmn-io/react-bpmn/actions?query=workflow%3ACI)

Use [bpmn-js](https://github.com/bpmn-io/bpmn-js) to display BPMN 2.0 diagrams in a [React](https://reactjs.org/) application.

## Usage

```javascript

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 (

    

  );

}

```

## Development

To get the development setup make sure to have [NodeJS](https://nodejs.org/en/download/) 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:9869/public in your Webbrowser.

## Resources

* [Issues](https://github.com/bpmn-io/react-bpmn/issues)

* [Example](./example)

## License

MIT