1"use strict";(self.webpackChunknocode_js_com=self.webpackChunknocode_js_com||[]).push([[9531],{3905:(e,t,i)=>{i.d(t,{Zo:()=>c,kt:()=>w});var r=i(7294);function o(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function n(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,r)}return i}function a(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?n(Object(i),!0).forEach((function(t){o(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):n(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function l(e,t){if(null==e)return{};var i,r,o=function(e,t){if(null==e)return{};var i,r,o={},n=Object.keys(e);for(r=0;r<n.length;r++)i=n[r],t.indexOf(i)>=0||(o[i]=e[i]);return o}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)i=n[r],t.indexOf(i)>=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(o[i]=e[i])}return o}var s=r.createContext({}),d=function(e){var t=r.useContext(s),i=t;return e&&(i="function"==typeof e?e(t):a(a({},t),e)),i},c=function(e){var t=d(e.components);return r.createElement(s.Provider,{value:t},e.children)},u="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var i=e.components,o=e.mdxType,n=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=d(i),f=o,w=u["".concat(s,".").concat(f)]||u[f]||p[f]||n;return i?r.createElement(w,a(a({ref:t},c),{},{components:i})):r.createElement(w,a({ref:t},c))}));function w(e,t){var i=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var n=i.length,a=new Array(n);a[0]=f;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[u]="string"==typeof e?e:o,a[1]=l;for(var d=2;d<n;d++)a[d]=i[d];return r.createElement.apply(null,a)}return r.createElement.apply(null,i)}f.displayName="MDXCreateElement"},4255:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>s,contentTitle:()=>a,default:()=>p,frontMatter:()=>n,metadata:()=>l,toc:()=>d});var r=i(7462),o=(i(7294),i(3905));const n={sidebar_position:2,sidebar_label:"Initialize with React"},a="Initialize Sequential Workflow Editor with React",l={unversionedId:"sequential-workflow-editor/initialize-with-react",id:"sequential-workflow-editor/initialize-with-react",title:"Initialize Sequential Workflow Editor with React",description:"In this tutorial we will show you how to initialize the Sequential Workflow Editor with React.",source:"@site/docs/sequential-workflow-editor/initialize-with-react.md",sourceDirName:"sequential-workflow-editor",slug:"/sequential-workflow-editor/initialize-with-react",permalink:"/docs/sequential-workflow-editor/initialize-with-react",draft:!1,tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2,sidebar_label:"Initialize with React"},sidebar:"tutorialSidebar",previous:{title:"Initialize with JS or TS",permalink:"/docs/sequential-workflow-editor/initialize-with-javascript-or-typescript"},next:{title:"Initialize with Angular",permalink:"/docs/sequential-workflow-editor/initialize-with-angular"}},s={},d=[{value:"\ud83d\ude80 Installation",id:"-installation",level:2},{value:"\ud83c\udfac Usage",id:"-usage",level:2}],c={toc:d},u="wrapper";function p(e){let{components:t,...i}=e;return(0,o.kt)(u,(0,r.Z)({},c,i,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"initialize-sequential-workflow-editor-with-react"},"Initialize Sequential Workflow Editor with React"),(0,o.kt)("p",null,"In this tutorial we will show you how to initialize the Sequential Workflow Editor with React."),(0,o.kt)("h2",{id:"-installation"},"\ud83d\ude80 Installation"),(0,o.kt)("p",null,"You may use the editor with any designer, but in this tutorial we will focus on the Sequential Workflow Designer. At the beginning you need to install the following dependencies:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-bash"},"npm i sequential-workflow-editor-model sequential-workflow-designer sequential-workflow-designer-react sequential-workflow-editor\n")),(0,o.kt)("h2",{id:"-usage"},"\ud83c\udfac Usage"),(0,o.kt)("p",null,"Check the below code snippet to see how to initialize the editor with React."),(0,o.kt)("p",null,"To create the ",(0,o.kt)("inlineCode",{parentName:"p"},"endpointDefinitionModel")," model check the ",(0,o.kt)("a",{parentName:"p",href:"./initialize-with-javascript-or-typescript"},"tutorial for JS or TS"),"."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import { EditorProvider } from 'sequential-workflow-editor';\nimport { Uid } from 'sequential-workflow-designer';\nimport { SequentialWorkflowDesigner } from 'sequential-workflow-designer-react';\n\nconst [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));\n\nconst editor = useMemo(() =>
1 {\n const editorProvider = EditorProvider.create<EndpointDefinition>(endpointDefinitionModel, {\n uidGenerator: Uid.next\n });\n return {\n rootEditor: editorProvider.createRootEditorProvider(),\n stepEditor: editorProvider.createStepEditorProvider(),\n rootValidator: editorProvider.createRootValidator(),\n stepValidator: editorProvider.createStepValidator(),\n stepLabelProvider: editorProvider.createStepLabelProvider(),\n toolboxGroups: editorProvider.getToolboxGroups()\n };\n}, []);\n\nreturn (\n <SequentialWorkflowDesigner\n definition={definition}\n rootEditor={editor.rootEditor}\n stepEditor={editor.stepEditor}\n validatorConfiguration={{\n root: editor.rootValidator,\n step: editor.stepValidator\n }}\n controlBar={true}\n stepsConfiguration={{}}\n onDefinitionChange={setDefinition}\n toolboxConfiguration={{\n groups: editor.toolboxGroups,\n labelProvider: editor.stepLabelProvider\n }}\n />\n);\n")),(0,o.kt)("p",null,"That's it! Now you can use the editor in your React application."))}p.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.