diff --git a/src/MultiStep.tsx b/src/MultiStep.tsx index d52997e..9fe4ee7 100644 --- a/src/MultiStep.tsx +++ b/src/MultiStep.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react' import { css, styled, setup } from 'goober' -import { MultiStepPropsBase, Step} from './interfaces' +import { MultiStepPropsBase, NavButton, Step} from './interfaces' setup(React.createElement) @@ -205,16 +205,18 @@ export default function MultiStep (props: MultiStepPropsBase) { } ) - const renderButtonsNav = (show) => + const renderButtonsNav = (show: boolean, prevButton?: NavButton, nextButton?: NavButton) => show && (
) @@ -223,7 +225,7 @@ export default function MultiStep (props: MultiStepPropsBase) {
    {renderTopNav()}
{steps[activeStep].component} -
{renderButtonsNav(showNavButtons)}
+
{renderButtonsNav(showNavButtons, props.prevButton, props.nextButton)}
) } diff --git a/src/interfaces.ts b/src/interfaces.ts index 2d79397..de38baf 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -5,6 +5,11 @@ export interface Step { component: React.ReactElement } +export interface NavButton{ + title?: string + style?: React.CSSProperties +} + export interface MultiStepPropsBase { stepCustomStyle?: object showNavigation?: boolean @@ -13,4 +18,6 @@ export interface MultiStepPropsBase { activeStep?: number children?: React.ReactElement[] steps?: Step[] + prevButton?: NavButton + nextButton?: NavButton }