fixed: support for passing 'title' prop added to inline mode

Author: ssrdjan-fadv

README.md

@@ -50,6 +50,7 @@ Step:
 There are two ways to configure Multistep, with external array: 
 
 (* **this is the old way, which is `deprecated` and will be removed in the next major version**)
+
 ```javascript
 const steps = [
               {title: 'StepOne', component: <StepOne/>},
@@ -60,14 +61,14 @@ const steps = [
 <Multistep activeStep={1} showNavigation={true} steps={steps}/>
 ```
 
-or, inline (to suport disabling moving to the next step if form validation is not passing):
+or, inline, to support disabling moving to the next step if form validation is not passing:
 
 ```javascript
 <Multistep activeStep={1} showNavigation={true}>
-    <StepOne/>
-    <StepTwo/>
-    <StepThree/>
-    <StepFour/>
+    <StepOne title: 'StepOne'/>
+    <StepTwo title: 'StepTwo'/>
+    <StepThree title: 'StepThree'/>
+    <StepFour title: 'StepFour'/>
 </Multistep>
 ```
 

package.json

@@ -38,7 +38,7 @@
     "react": "18.2.0"
   },
   "scripts": {
-    "build": "tsc && cp -f ./build/** ./example/node_modules/MultiStep/",
+    "build": "tsc && mkdir -p ./example/node_modules/MultiStep && cp -f ./build/** ./example/node_modules/MultiStep/",
     "bundle": "esbuild ./build/index.js \"--define:process.env.NODE_ENV='production'\" --external:react --bundle --format=cjs --loader:.js=jsx --outdir=dist",
     "publish": "npm publish ./"
   }

src/MultiStep.js

@@ -116,7 +116,8 @@ const getButtonsState = (indx, length, isValidState) => {
 }
 
 export default function MultiStep (props: MultiStepPropsBase) {
-  const {children} = props
+  const { children } = props
+
   let stepsArray = props.steps
 
   if (!stepsArray && !children) {
@@ -135,8 +136,8 @@ export default function MultiStep (props: MultiStepPropsBase) {
     })
     // for backward compatibility we preserve 'steps' with components array:
     steps = childrenWithProps.map(childComponent => (
-      { 
-        title: childComponent.title,
+      {
+        title: childComponent.props.title,
         component: childComponent
       })
     )