config object for navigation component added

Author: sametweb

README.md

@@ -41,6 +41,34 @@ Example:
 
 <br />
 
+# Config Object
+
+`Steps` component accepts an optional `config` object for configuring the common navigation component. The `Navigation` component provided in the config object will be rendered along with every step component. Here is an example:
+
+```javascript
+const Navigation = (props) => {
+    return (
+        <div>
+            <button onClick={props.prev}>Previous</button>
+            <button onClick={props.next}>Next</button>
+        </div>
+    );
+}
+
+const config = {
+	navigation: {
+		component: Navigation // a React component with special props provided automatically
+		location: "before" // or after
+	}
+}
+
+<Steps config={config}>
+	<Step title="My First Step" component={Step1} />
+	<Step title="My Second Step" component={Step2} />
+	<Step title="My Third Step" component={Step3} />
+</Steps>
+```
+
 # Documentation
 
 ## Wrapper Components
@@ -49,7 +77,7 @@ Example:
 
 | Component   | Description                                                                                                                                                                                                                                                                                |
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `<Steps />` | Wrapper component for Step components.                                                                                                                                                                                                                                                     |
+| `<Steps />` | Wrapper component for Step components. Accepts a `config` object for rendering a common navigation component.                                                                                                                                                                              |
 | `<Step />`  | `title`: takes a title for the step, which can be accessed in `props` object of the step component. <br />`component`: takes a React component that you would like to show in that step. <br />`beforeStepChange`: takes a callback function to run right before the current step changes. |
 
 <br />
@@ -78,6 +106,22 @@ The React component that is passed to each `Step` wrapper component will be inje
 | `props.getState`     | `function<key, defaultValue>` | Function to retrieve a state value by key            |
 | `props.handleChange` | `function<event>`             | `onChange` event handler for form elements           |
 
+## Navigation Component `props`
+
+| Property             | Type                          | Description                                          |
+| -------------------- | ----------------------------- | ---------------------------------------------------- |
+| `props.size`         | `number`                      | Total number of steps                                |
+| `props.current`      | `string`                      | Current step number                                  |
+| `props.progress`     | `number`                      | Progress of the current step, value between 0 and 1  |
+| `props.next`         | `function`                    | Function to move to the next step                    |
+| `props.prev`         | `function`                    | Function to move to the previous step                |
+| `props.jump`         | `function<step>`              | Function to jump to the given step                   |
+| `props.allSteps`     | `Array<{order, title}>`       | Array of all available steps' title and order number |
+| `props.state`        | `object`                      | Combined state value of all steps                    |
+| `props.setState`     | `function<key, value>`        | Function to set/update state by key                  |
+| `props.getState`     | `function<key, defaultValue>` | Function to retrieve a state value by key            |
+| `props.handleChange` | `function<event>`             | `onChange` event handler for form elements           |
+
 <br />
 <hr />
 <br />
@@ -113,3 +157,18 @@ const Step1 = (props: StepComponentProps) => {
 
 export default Step1;
 ```
+
+## Component Type of Example Navigation Component
+
+If you'd like to add a persistent navigation component to be shown on every step, you may utilize `NavigationComponentProps` type for your custom `Navigation` component. Here is an example:
+
+```javascript
+const Navigation = (props: NavigationComponentProps) => {
+	return (
+		<div>
+			<button onClick={props.prev}>Previous</button>
+			<button onClick={props.next}>Next</button>
+		</div>
+	);
+};
+```

src/App.tsx

@@ -1,15 +1,32 @@
 import React from "react";
-import { Steps, Step } from "./lib-ts/index";
+import { Steps, Step, NavigationComponentProps } from "./lib-ts/index";
 import Step1 from "./stepComponents/Step1";
 import Step2 from "./stepComponents/Step2";
 import Step3 from "./stepComponents/Step3";
 import Step4 from "./stepComponents/Step4";
 
+const Navigation = (props: NavigationComponentProps) => {
+	console.log(props);
+	return (
+		<div>
+			<button onClick={props.prev}>Previous</button>
+			<button onClick={props.next}>Next</button>
+		</div>
+	);
+};
+
 const App = () => {
 	return (
 		<div className="steps_wrapper">
 			<h1>React Step Builder v1.1.0</h1>
-			<Steps>
+			<Steps
+				config={{
+					navigation: {
+						component: Navigation,
+						location: "before",
+					},
+				}}
+			>
 				<Step title="Hello" component={Step1} deneme={"deneme"} />
 				<Step component={Step2} />
 				<Step title="Contact Info" component={Step3} />

src/lib-ts/index.tsx

@@ -24,6 +24,12 @@ interface State {
 
 type StepsProps = {
 	children: ReactElement<StepProps> | ReactElement<StepProps>[];
+	config?: {
+		navigation?: {
+			component: (props: any) => JSX.Element;
+			location?: "before" | "after";
+		};
+	};
 };
 
 type BeforeStepChange = () => any;
@@ -98,6 +104,10 @@ interface StepContext {
 	order: number;
 }
 
+export interface NavigationComponentProps extends StepsContext {
+	[name: string]: any;
+}
+
 const StepsContext = React.createContext<StepsContext>({
 	// Dummy values for satisfying the type checker
 	// Gets updated before being passed down
@@ -119,9 +129,18 @@ const StepContext = React.createContext<StepContext>({ order: 0 });
 /**
  * Wrapper component for `Step` components.
  */
-export function Steps({ children }: StepsProps) {
+export function Steps({ children, config }: StepsProps) {
 	const childSteps = React.Children.toArray(children);
 
+	const NavigationComponent = (context: NavigationComponentProps) => {
+		if (config?.navigation?.component) {
+			const NavComponent = config?.navigation?.component;
+			return <NavComponent {...context} />;
+		} else {
+			return null;
+		}
+	};
+
 	const allSteps: AllSteps = childSteps.map((child, order) => {
 		return {
 			title:
@@ -210,11 +229,14 @@ export function Steps({ children }: StepsProps) {
 
 	return (
 		<StepsContext.Provider value={context}>
+			{config?.navigation?.location === "before" &&
+				NavigationComponent(context)}
 			{React.Children.map(children, (child, order) => (
 				<StepContext.Provider value={{ order: order + 1 }}>
 					{child}
 				</StepContext.Provider>
 			))}
+			{config?.navigation?.location === "after" && NavigationComponent(context)}
 		</StepsContext.Provider>
 	);
 }

tsconfig.json

@@ -1,23 +1,30 @@
 {
-	"compilerOptions": {
-		"target": "es6",
-		"module": "esnext",
-		"jsx": "react",
-		"declaration": true,
-		"declarationMap": true,
-		"sourceMap": true,
-		"outDir": "src/lib",
-		"strict": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"lib": ["dom", "dom.iterable", "esnext"],
-		"allowJs": true,
-		"allowSyntheticDefaultImports": true,
-		"moduleResolution": "node",
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"noEmit": false
-	},
-	"include": ["src/lib-ts/**/*.ts", "src/lib-ts/**/*.tsx"]
+  "compilerOptions": {
+    "target": "es6",
+    "module": "esnext",
+    "jsx": "react",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "src/lib",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": [
+    "src/lib-ts/**/*.ts",
+    "src/lib-ts/**/*.tsx"
+  ]
 }