1"use strict";(self.webpackChunknocode_js_com=self.webpackChunknocode_js_com||[]).push([[2181],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>g});var r=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},u=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,i=e.mdxType,o=e.originalType,s=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),c=p(n),f=i,g=c["".concat(s,".").concat(f)]||c[f]||d[f]||o;return n?r.createElement(g,a(a({ref:t},u),{},{components:n})):r.createElement(g,a({ref:t},u))}));function g(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=n.length,a=new Array(o);a[0]=f;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[c]="string"==typeof e?e:i,a[1]=l;for(var p=2;p<o;p++)a[p]=n[p];return r.createElement.apply(null,a)}return r.createElement.apply(null,n)}f.displayName="MDXCreateElement"},5810:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>a,default:()=>d,frontMatter:()=>o,metadata:()=>l,toc:()=>p});var r=n(7462),i=(n(7294),n(3905));const o={sidebar_position:3,sidebar_label:"Initialize with React"},a="Initialize Sequential Workflow Designer with React",l={unversionedId:"sequential-workflow-designer/initialize-with-react",id:"sequential-workflow-designer/initialize-with-react",title:"Initialize Sequential Workflow Designer with React",description:"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.",source:"@site/docs/sequential-workflow-designer/initialize-with-react.md",sourceDirName:"sequential-workflow-designer",slug:"/sequential-workflow-designer/initialize-with-react",permalink:"/docs/sequential-workflow-designer/initialize-with-react",draft:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,sidebar_label:"Initialize with React"},sidebar:"tutorialSidebar",previous:{title:"Initialize with Angular",permalink:"/docs/sequential-workflow-designer/initialize-with-angular"},next:{title:"Initialize with Svelte",permalink:"/docs/sequential-workflow-designer/initialize-with-svelte"}},s={},p=[{value:"\ud83d\ude80 Installation",id:"-installation",level:2},{value:"\ud83c\udfac Usage",id:"-usage",level:2},{value:"Next.js",id:"nextjs",level:2},{value:"\ud83d\udea7 Demo Project",id:"-demo-project",level:2}],u={toc:p},c="wrapper";function d(e){let{components:t,...n}=e;return(0,i.kt)(c,(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"initialize-sequential-workflow-designer-with-react"},"Initialize Sequential Workflow Designer with React"),(0,i.kt)("p",null,"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."),(0,i.kt)("admonition",{title:"Examples",type:"tip"},(0,i.kt)("p",{parentName:"admonition"},"Check our ",(0,i.kt)("a",{parentName:"p",href:"/sequential-workflow-designer-examples"},"online examples"),".")),(0,i.kt)("h2",{id:"-installation"},"\ud83d\ude80 Installation"),(0,i.kt)("p",null,"Install the following packages by ",(0,i.kt)("a",{parentName:"p",href:"https://www.npmjs.com/"},"NPM")," command:"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"npm i sequential-workflow-designer sequential-workflow-designer-react")),(0,i.kt)("p",null,"Add CSS files to your app:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"import 'sequential-workflow-designer/css/designer.css';\nimport 'sequential-workflow-designer/css/designer-light.css';\nimport 'sequential-workflow-designer/css/designer-dark.css';\n")),(0,i.kt)("h2",{id:"-usage"},"\ud83c\udfac Usage"),(0,i.kt)("p",null,"Import types:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"import {\n Definition,\n ToolboxConfiguration,\n StepsConfiguration,\n ValidatorConfiguration\n} from 'sequential-workflow-designer';\nimport {\n SequentialWorkflowDesigner,\n wrapDefinition,\n useRootEditor,\n useStepEditor\n} from 'sequential-workflow-designer-react';\n")),(0,i.kt)("p",null,"Create or load your definition of a workflow."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const startDefinition: Definition = { /* ... */ };\n")),(0,i.kt)("p",null,"Wrap the start definition and memorize it."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));\n")),(0,i.kt)("p",null,"Configure the designer."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const toolboxConfiguration: ToolboxConfiguration = useMemo(() => ({ /* ... */ }), []);\nconst stepsConfiguration: StepsConfiguration = useMemo(() => ({ /* ... */ }), []);\nconst validatorConfiguration: ValidatorConfiguration = useMemo(() => ({ /* ... */ }), []);\n")),(0,i.kt)("p",null,"Create the root editor component:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"function RootEditor() {\n const { properties, setProperty, definition, isReadonly } = useRootEditor();\n\n function onSpeedChanged(e) {\n setProperty('speed', e.target.value);\n }\n\n return (\n <>\n <h3>Speed</h3>\n <input value={properties['speed'] || ''} onChange={onSpeedChanged} />\n </>\n );\n}\n")),(0,i.kt)("p",null,"Create the step editor component:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"function StepEditor() {\n const { type, componentType, name, setName, properties, setProperty, definition, isReadonly } = useStepEditor();\n\n function onNameChanged(e) {\n setName(e.target.value);\n }\n\n return (\n <>\n <h3>
1Name</h3>\n <input value={name} onChange={onNameChanged} />\n </>\n );\n}\n")),(0,i.kt)("p",null,"At the end attach the designer."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"<SequentialWorkflowDesigner\n definition={definition}\n onDefinitionChange={setDefinition}\n stepsConfiguration={stepsConfiguration}\n validatorConfiguration={validatorConfiguration}\n toolboxConfiguration={toolboxConfiguration}\n controlBar={true}\n contextMenu={true}\n rootEditor={<RootEditor />}\n stepEditor={<StepEditor />}>\n />\n")),(0,i.kt)("p",null,"You can hide any UI component."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"<SequentialWorkflowDesigner\n // ...\n toolboxConfiguration={false}\n controlBar={false}\n contextMenu={false}\n rootEditor={false}\n stepEditor={false}>\n />\n")),(0,i.kt)("p",null,"That's it!"),(0,i.kt)("h2",{id:"nextjs"},"Next.js"),(0,i.kt)("p",null,"The designer is fully front-end component, to use it with Next.js you need to be sure the code won't be executed on the server side. We recommend to create a dedicated component that is importing the designer."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"// MyDesigner.tsx\nimport { SequentialWorkflowDesigner } from 'sequential-workflow-designer-react';\n\nexport default function MyDesigner(props: MyDesignerProps) {\n return <SequentialWorkflowDesigner ... />;\n}\n")),(0,i.kt)("p",null,"Then import the component in your page by using the ",(0,i.kt)("inlineCode",{parentName:"p"},"dynamic")," feature. You need to disable the server side rendering by setting the ",(0,i.kt)("inlineCode",{parentName:"p"},"ssr: false")," option."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"// FlowEditor.tsx\nconst MyDesigner = dynamic(() => import('./MyDesigner'), { ssr: false });\n\nexport default function FlowEditor(props: FlowEditorProps) {\n return <MyDesigner ... />;\n}\n")),(0,i.kt)("h2",{id:"-demo-project"},"\ud83d\udea7 Demo Project"),(0,i.kt)("p",null,"Check the ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/nocode-js/sequential-workflow-designer/tree/main/demos/react-app"},"demo project"),"."))}d.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.