Skip to main content

Initialize Sequential Workflow Designer with React

The designer is written in TypeScript with no dependencies, but to increase a developer experience we prepared a dedicated package for React. The package wraps a native component and provides a React style syntax.

Examples

Check our online examples.

🚀 Installation

Install the following packages by NPM command:

npm i sequential-workflow-designer sequential-workflow-designer-react

Add CSS files to your app:

import 'sequential-workflow-designer/css/designer.css';
import 'sequential-workflow-designer/css/designer-light.css';
import 'sequential-workflow-designer/css/designer-dark.css';

🎬 Usage

Import types:

import {
Definition,
ToolboxConfiguration,
StepsConfiguration,
ValidatorConfiguration
} from 'sequential-workflow-designer';
import {
SequentialWorkflowDesigner,
wrapDefinition,
useGlobalEditor,
useStepEditor
} from 'sequential-workflow-designer-react';

Create or load your definition of a workflow.

const startDefinition: Definition = { /* ... */ };

Wrap the start definition and memorize it.

const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));

Configure the designer.

const toolboxConfiguration: ToolboxConfiguration = { /* ... */ };
const stepsConfiguration: StepsConfiguration = { /* ... */ };
const validatorConfiguration: ValidatorConfiguration = { /* ... */ };

Create the global editor component:

function GlobalEditor() {
const { properties, setProperty } = useGlobalEditor();

function onSpeedChanged(e) {
setProperty('speed', e.target.value);
}

return (
<>
<h3>Speed</h3>
<input value={properties['speed'] || ''} onChange={onSpeedChanged} />
</>
);
}

Create the step editor component:

function StepEditor() {
const { type, componentType, name, setName, properties, setProperty } = useStepEditor();

function onNameChanged(e) {
setName(e.target.value);
}

return (
<>
<h3>Name</h3>
<input value={name} onChange={onNameChanged} />
</>
);
}

At the end attach the designer.

<SequentialWorkflowDesigner
definition={definition}
onDefinitionChange={setDefinition}
stepsConfiguration={stepsConfiguration}
validatorConfiguration={validatorConfiguration}
toolboxConfiguration={toolboxConfiguration}
controlBar={true}
globalEditor={<GlobalEditor />}
stepEditor={<StepEditor />}>
/>

If you don't want any UI component you may hide it.

<SequentialWorkflowDesigner
// ...
toolboxConfiguration={false}
controlBar={false}
globalEditor={false}
stepEditor={false}>
/>

That's it!

🚧 Demo Project

Check the demo project.