React-multiple-page NPM

react-multiple-page

It supports history block and prevent 'Back button'. It will be help when you build form tags in multiple page

Installation

npm i --save react-multiple-page

Usage

I recommend you to see /examples

src/App.js about BrowserRouter

import React, { Fragment } from 'react'
import { Route, Switch, BrowserRouter } from 'react-router-dom'
import FormPage from 'components/pages/FormPage'

const customConfimation = (message, callback) => {
  // ... refer to this Link https://gist.github.com/robertgonzales/e54699212da497740845712f3648d98c
}

const App = () => (
  <Fragment>
    <BrowserRouter getUserConfirmation={customConfimation}>
      <Switch>
        {/* ... */}
        <Route path="/form" component={FormPage} /> 
      </Switch>
    </BrowserRouter>
  </Fragment>
)

src/components/pages/FormPage about using MultiplePageView

import MultiplePageView from 'react-multiple-page'

import Section1 from './Section1'
import Section2 from './Section2'
import Section3 from './Section3'

const FormPage = (props) => (
  <MultiplePageView
    pages={[Section1, Section2, Section3]}  // isRequired
    message={"메시지를 작성중입니다 정말 이 페이지를 떠나시겠습니까?"} // isOptionable
    // when={false} // isOptionable
    {...whatevers}
    {...props}
  />
)

src/components/pages/FormPage/Section1.js

import React from 'react'

export default const Section1 = (props) => {
  const { pageController } = props // from `react-multiple-page` property. that have a role control about this lib

  return (
    <div className="page">
      <div className="form-control">
        <h1> Hello, I am Section1 </h1>
      </div>
      <div className="form-control">
        <button className="half-button" onClick={pageController.prevPage}>Prev</button>
        <button className="half-button" onClick={pageController.nextPage}>Next</button>
      </div>
    </div>
  )
}

Options

when: ( boolean | func )
message: ( string | func )
pages: ( Array: ...Components)

Transfer controller to `Section` Component

Docs. Usage. 3 It will be help you.

pageController: { nextPage, prevPage, goPage, when, message }

!! Caution !!

This source code using location.state,

When you need to use location.state for modal, popup and etc.., Please watch out drop away 'mp_page' in location.state This source code use location.state. So, I recommand your source code change like this.

  // (...)
  const { location, history } = this.props
  // history.replace(location.pathname, { ...location.state, mp_page })
  history.push(location.pathname, { ...location.state, mp_page })
  // (...)