Support for the experimental syntax 'classProperties' isn't currently enabled. Doesn't work even when you have npm run eject and modified babelrc as required.

How can I add firebase into it and store every element I selected or input in.

Hi,
I found another project that is really like yours (and in the code there is similarity).
It's more advanced, but it's not a fork, why ?

Like i have to display a form where user can publish item at very last screen screen. but i do not want to add step-heading for that component.
Thanks in advance!!

I am incorporating your library in a project I'm doing. In this project I am converting a one-pager for into a multi-step form. The <MultiStep /> component is rendered by another component which should pass props to the slides. I tried to pass it through <MultiStep steps={steps} user={user} /> but user didn't pass to the steps.
I couldn't find a documentation that explains how to do it.

Would appreciate your help on this subject :)

Getting this error when including react-multistep in my webpack project:

Windows 10
Webpack 4.28.3
React 16.7

Steps to repo (in a react project with above Webpack version, running Webpack dev-server):

• npm i react-multistep --save
• In a JSX file add the following line:
  import MultiStep from 'react-multistep/src/index';
• Wait for dev-server to compile, but it fails with this error:

ERROR in ./node_modules/react-multistep/src/index.js 37:8
Module parse failed: Unexpected token (37:8)
You may need an appropriate loader to handle this file type.
|
| export default class MultiStep extends React.Component {
>   state = {
|     showPreviousBtn: false,
|     showNextBtn: true,

Tried going into the node_modules/react-multistep file and do the "npm run build-with-webpack" you suggested in some other issues (but seems like this just builds the sample app and has nothing to do with using the node module in a real project) and it gave a similar error.

Seems like this issue is similar to #38, #30, #23, #20, none of which were solved in a general way.

It's counterintuitive not to have buttons to go back and forward.

npm module applies css styling to specific html tags which can not be removed or overwritten. For example list items.

How do i customise this wizard. I want to add wrapper for content and footer buttons and want separate navigation bar.

Hey @srdjan I'm using this library and I did a few fixes for the new ref system, also I added a few options in my branch. I would like to know if you would like to receive a proper PR, if so I can prepare it.

Hi
First of all thank you for the great project. However I am trying to use it in my project (CRA) and I get the following:

./node_modules/react-multistep/src/index.js
Module parse failed: Unexpected token (98:6)
You may need an appropriate loader to handle this file type.
|   renderSteps() {
|     return this.props.steps.map((s, i)=> (
|       <li className={this.getClassName("progtrckr", i)} onClick={this.handleOnClick} key={i} value={i}>
|         <em>{i+1}</em>
|         <span>{this.props.steps[i].name}</span>

any ideas? happy to contribute to the docs if you point me in the right direction.

Thanks

./node_modules/react-multistep/src/index.js
Module parse failed: Unexpected token (37:8)
You may need an appropriate loader to handle this file type.
|
| export default class MultiStep extends React.Component {
| state = {
| showPreviousBtn: false,
| showNextBtn: true,

Allow className to control the visibility of step component instead of removing from dom

Hi, I looked at the index.js and cannot see any validation included. How would you validate an individual step?

Any plan to integrate with Redux forms? Thanks.

Thanks for this library. Please, how do one create a submit button after the completion of filling the form since only Prev and Next buttons are the ones available? And also how do one handle validations on each steps?

ERROR in ./node_modules/react-multistep/index.js 65:6
Module parse failed: Unexpected token (65:6)
You may need an appropriate loader to handle this file type.
| const renderSteps = () =>
| props.steps.map((s, i) => (

  <li

| className={'progtrckr-' + stylesState[i]}
| onClick={handleOnClick}

For correct work used https://github.com/newbreedofgeek/react-stepzilla
this install works without problem

I want to style using the parent class.

ie, I want to use like this:
<MultiStep showNavigation={true} className="my-class" steps={steps}/>
But className not working.

Is there any way to give className to the container???

Also, I want to add className to Previous and Next buttons for styling.

I'm waiting for your reply.

We should probably be able to prevent being able to click on future steps before previous steps are completed. This would help prevent a lot of headache regarding sanity check overhead when developing.

is there a plan to add documentation soon? do you need help with it?

'use strict';
var ReactDOM = require('react-dom');
var React = require('react');
var MultiStep = require('react-multistep').MultiStep;

//MultiStep is undefined
Could you please help?

How do i specify a function for the navigation buttons and the Navigation steps in the header?

Curious if you're looking to publish to npm.

Hi, your module throws errors on the jsx in line 53 of index.js. The jsx which should not be in your published module.

Please always export your code without any dependencies on es6 or jsx, so other people can include it as is.

Thanks in advance!

bug? I use with babel-loader 6.2.4 and babel-preset-es2015 6.9.0

node_modules/react-multistep/src/index.js Unexpected token (98:6)
You may need an appropriate loader to handle this file type.

My case:
I have 3 steps, if the third step is valid, I'll send the fourth step to props.steps of multistep component and if the fourth is valid, I'll send the fifth step to multistep and so forth until I finish my scenario journey.

The issue:
Steps:

• If we just have three steps and I am already in the third one.
• After some user inputs, the third step got valid.
• My code automatically sends the fourth step to the multistep component.
• The nav styles get updated, but the buttons still as is, with NO next button visible.

Why:
Because updating the buttons only happens on three events
When the user hits
1- The navigation list items
2- Next button
3- Previous button

The fix:

• Buttons should be updated on props.steps changes

I have created a pull-request with the fix
#57

Thank you

Hi @srdjan. I noticed that state data is not been saved between steps. I know this works fine in your demo page but If follow these steps you will be able to see what I am talking about

• Clone this repo
• npm install
• npm run build
• upload build to a webserver

Do you have any idea what might be wrong?

Regards

Ivan

how to add class in action buttons

Is there a way to change content to dynamic number ?

Hi,
When we are on the last step, the Next button is not there except when we click on the last step on the navigation.

Getting the following error while building:
SyntaxError: Unexpected token: name (MultiStep) [./~/react-multistep/src/index.js:2,0]

Running React 15.5.4

ERROR in .//react-multistep/src/multistep.js
Module parse failed: /Developer/NullPay/TierraPay/client/node_modules/react-multistep/src/multistep.js Unexpected token (98:6)
You may need an appropriate loader to handle this file type.
| renderSteps() {
| return this.props.steps.map((s, i)=> (
| <li className={this.getClassName("progtrckr", i)} onClick={this.handleOnClick} key={i} value={i}>
| {i+1}
| {this.props.steps[i].name}
@ .//react-multistep/src/index.js 2:0-35
@ ./app/bundles/WalletApp/components/SendMoney/SendMoney.jsx
@ ./app/bundles/WalletApp/startup/registration.jsx
@ multi es5-shim/es5-shim es5-shim/es5-sham babel-polyfill ./app/bundles/WalletApp/startup/registration

I add this on my react_on_rails gem for rails app

I have imported the package and in while building in webpack, I am getting following error.
ERROR in ./~/react-multistep/src/index.js
Module parse failed: E:\work\webui\scm-hackfest\node_modules\react-multistep\src\index.js Unexpected token (98:6)
You may need an appropriate loader to handle this file type.
| renderSteps() {
| return this.props.steps.map((s, i)=> (
| <li className={this.getClassName("progtrckr", i)} onClick={this.handleOn
Click} key={i} value={i}>
| {i+1}
| {this.props.steps[i].name}
@ ./app/containers/TemplatePage/index.js 53:16-42
Child html-webpack-plugin for "index.html":

It says I don't have appropriate loader. Please let me know if I am missing something.

https://ajusa.github.io/lit/
https://github.com/pure-css/pure/

I got it. how to add type="button".

Hello, how can one add validation to the input forms? I want to prevent the next page from showing up if no data has been entered in the present page's input forms. Thank you

Form data does not appear to persist across 'steps', however, your gh-pages branch does. Is there a reason the state of each form field is not kept between steps in your master branch?

I am a bit confused.

Trying to use your multistep plugin in my project and getting:

ERROR in ./~/react-multistep/src/index.js Module parse failed: /Users/demo/node_modules/react-multistep/src/index.js Unexpected token (98:6) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (98:6)

My .babelrc file looks like so:

{ "plugins": ["transform-react-jsx"], "presets": ["react", "es2015", "stage-2"], "env": { "development": { "presets": [ "react-hmre"] }, "production": { "plugins": [ "transform-react-constant-elements", "transform-react-remove-prop-types" ] } } }

any idea what's going on?

Hello,

This is more of a question than a issue.

I'm using your example code here:
https://github.com/Srdjan/react-multistep/tree/master/example/app

But as the user clicks on the "Next" button I need to first call a method inside the child (step) component before rendering it.

For example, I have a isValidated() method inside each of my child (step) components. When you click on the next button I want to first check if the current step has validated and then move on.

e.g.:

next() {
    if (this.props.steps[this.state.compState].component.isValidated()) {
       this.setNavState(this.state.compState + 1)
    }
}

I want to do this without using a store (flux / redux events) as this has more to do with component state rather than data state.

Once way is to somehow assign a "ref" to the child step component in the render() of MultiStep.

e.g.

render() {
    return (
        ...
        { this.props.steps[this.state.compState].component}.refs = 'activeComponent' }
        ...
    )
}

and then in next() access the activeComponent's isValidated() method.

next() {
    if (this.refs.activeComponent.isValidated()) {
       this.setNavState(this.state.compState + 1)
    }
}

But unfortunately I am not sure if we can add a refs to the step property as the child step component is passed in the array.

How would you do this? any advise / help?

To reproduce:

1. Click on step name (such as "StepTwo" of example)
2. Notice how progtrckr becomes unstyled and the desired step isn't selected.

This occurs because the handleOnClick method uses event.target instead of event.currentTarget.

When you click on the <span> that contains the step name, the parent <li>'s onClick is still fired, but evt.target.value is undefined because the span (the target) doesn't have a value. Using currentTarget ensures that the value comes from the element with the actual handler (the <li>).

More on currentTarget

Hey,

I'm trying to learn your repo using the example but encoutered problems with the last two steps.
On react-multistep/example when running sudo npm run build:dev I receive the following error:

npm ERR! missing script: build:dev

any thoughts on how and why can it happen?

Please include react-multistep as a package in AtmosphereJS - the package system for Meteor applications.

Hi,

When I execute the command npm run build after executing npm install I get the below mentioned error

error: Must use "outdir" when there are multiple input files

FYI: I have checked out the master

With create-react-app, I installed via npm install react-multistep. Then, following the directions provided in the readme I get the following error:

`./node_modules/react-multistep/src/index.js
SyntaxError: ...\node_modules\react-multistep\src\index.js: Unexpected token (63:6)

61 | const renderSteps = () =>
62 | props.steps.map((s, i) => (

63 | <li
| ^
64 | className={'progtrckr-' + stylesState[i]}
65 | onClick={handleOnClick}
66 | key={i}`

Rubbish Plugin. No proper example. No proper Demo. Error in index.js in node_modules.

https://github.com/babel/babelify

E:\localstorage\react-multistep-master>npm test

[email protected] test E:\bitbucket\react-multistep-master
todo... mocha

'todo...' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! Test failed. See above for more details

Note: I had tried to run "Dev Instructions", but it is showing the error as above. Help me out of this issue.

https://github.com/Srdjan/react-multistep/blob/master/src%2Fjs%2Fcomponents%2Fmultistep.js