!Sequential Workflow Designer for React

Sequential Workflow Designer for React

  

React wrapper for the Sequential Workflow Designer component.

🚀 Installation

Install the following packages by NPM command:

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

Add CSS files to your app:

``tsx
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:

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

Create or load your definition of a workflow.

`ts
const startDefinition: Definition = { / ... / };
`

Wrap the start definition and memorize it.

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

Configure the designer.

`ts
const toolboxConfiguration: ToolboxConfiguration = useMemo(() => ({ / ... / }), []);
const stepsConfiguration: StepsConfiguration = useMemo(() => ({ / ... / }), []);
const validatorConfiguration: ValidatorConfiguration = useMemo(() => ({ / ... / }), []);
`

Create the root editor component:

`tsx
function RootEditor() {
const { properties, setProperty, definition, isReadonly } = useRootEditor();

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

return (
<>


Speed




);
}
`

Create the step editor component:

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

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

return (
<>


Name




);
}
`

At the end attach the designer.

`tsx
definition={definition}
onDefinitionChange={setDefinition}
stepsConfiguration={stepsConfiguration}
validatorConfiguration={validatorConfiguration}
toolboxConfiguration={toolboxConfiguration}
controlBar={true}
contextMenu={true}
rootEditor={}
stepEditor={}>
/>
`

You can hide any UI component.

`tsx
// ...
toolboxConfiguration={false}
controlBar={false}
contextMenu={false}
rootEditor={false}
stepEditor={false}>
/>
``

Check the demo project.

💡 License

This project is released under the MIT license.