jcmcneal / react-step-wizard Goto Github PK
View Code? Open in Web Editor NEWA modern flexible step wizard component built for React.
License: MIT License
A modern flexible step wizard component built for React.
License: MIT License
I've having issue where some of the steps are not loaded even thought they are inside the StepWizard component. Let's say I have 8 steps, it only shows the first 5. What could be the problem here?
This doesn't work:
{
questionnaires.map((questionnaire) => (
<Questionnaire question={questionnaire.title} options={questionnaire.options} callback={updateSymptom} />
))
}
This works:
<Questionnaire question={questionnaires[0].title} options={questionnaires[0].options} callback={updateSymptom} />
<Questionnaire question={questionnaires[1].title} options={questionnaires[1].options} callback={updateSymptom} />
<Questionnaire question={questionnaires[2].title} options={questionnaires[2].options} callback={updateSymptom} />
<Questionnaire question={questionnaires[3].title} options={questionnaires[3].options} callback={updateSymptom} />
Thoughts on adding feature for optional url hash of the step # or localStorage?
Very primitive initial thoughts:
<StepWizard persistSate="url">
<Step><Step1 /></Step>
<Step><Step2 /></Step>
<Step><Step.. /></Step>
<Step><Step..12 /></Step>
<Step><WhateverComponentName /></Step>
</StepWizard>
Will you accept a PR for passing in the prop initialStep
to <StepWizard />
that will cause the step # to render first on initial mount?
This is a useful prop where StepWizard defines a full step flow but some use cases of a StepWizard flow might need to start at step # 'X' ie: skip the first step.
Could you include a folder for examples to this repo?
Thanks!
Hello there!
I have the following code:
<StepWizard transitions={noTransitions} isHashEnabled>
<fieldset>
<h5>fsdfdsfsdf</h5>
<button className='btn btn-primary btn-block' onClick={nextStep}>Continue</button>
</fieldset>
<fieldset isActive>
<h5>dsggdfg</h5>
<button className='btn btn-default btn-block' onClick={previousStep}>Go Back</button>
</fieldset>
</StepWizard>
Nevertheless, when I click on Continue button, nothing changes. The page reloads, but nothing changes.
Any ideas?
Thanks in advance.
is it possible to transfer data from one step to the other?
To reproduce, once the progress bar starts, go to first step and wait.
After at while you will automatically be moved to second step.
Hi, its not a bug sorry.
Its possible to set the active children from outside a child?
I have an structure like this.
MyContainer
Buttons
StepWizard
Form1
Form2
I want to control the active child from myContainer. Is this possible?
Thanks!
After switching to step 2, the url adds #step2
. When I hit the back button, it returns back to the original url which doesn't do the transition back to step1 at all. Is there a way to have the back button work on step1 after transitioning to step2?
Thanks!
Is there a way to use vertical transitions instead of the horizontal ones?
Im experiencing some issues with the isHashEnable flag where it sets the router browser url to #undefined instead of #step1 ... #step{N} etc...
<StepWizard
isHashEnabled={true}
transitions={{
enterRight: "",
enterLeft: "",
exitRight: "",
exitLeft: "",
}}
>
{this.state.steps.map((stepdata, i) => {
return (
<CustomStep
key={i}
data={stepdata}
update={this.setData}
canGoBack={this.canGoBack}
/>
);
})}
</StepWizard>
Im using eact-router-dom
as my router if that matters... ?
I am trying to render steps form a loop. Here is my code:
<StepWizard isLazyMount={true} nav={<WizardDots />}>
<Introduction />
<CreateProfileInstructions giftTypes={state.giftTypes} onConfirmation={this.setGiftSelectionMode}/>
{state.pages.map((type) => (
<ProfileSelection key={type} hashKey={type} giftType={type} />
))}
</StepWizard>
I am getting this error about cannot read property hashkey of undefined. I have tried initializing state.pages as both an empty array and an array with a single string element. How can I render steps based on an array in state?
Thanks!
Hi!
It seems there's no clean way to apply styles to the inner divs, especially since webpack will mangle the class names (this is a non-issue for the parent div since it accepts a className
prop).
<div class="PublishWizard_wizard-content__3Ovvw">
<div class="rsw_2Y">
<div class="rsw_2f rsw_3G"></div>
</dv>
</div>
I have to work around the fact that I don't have the class names by doing something like this in my CSS.
#wizard > div,
#wizard > div > div {
height: 100%; /* example */
}
I'm not sure how this could be solved but seems like a small paper-cut for full control. I'm also not that familiar with webpack so I might be missing something completely obvious here.
When I try to build my gatsby application this error occurs and it breaks my build.
I think this can be resolved moving window.addEventListener to componentDidMount.
HI,
I am using custom transition animation for my wizard steps. For me the enterLeft
and enterRight
transitions are working fine. But the other two, exitLeft
and exitRight
animations are not working.
I hope the exit animations are applied to the one step when the other step comes in.
I'm currently using the wizard but I have some strict styling requirements that make styling difficult if I nest nest components inside the step and not at the same depth as the Nav
component. Unfortunately there's currently no way to nest any components except Nav
inside the inner div so I can't align them. My workaround for this was to use the instance
prop and pull the Nav
component out of the StepWizard
component and do some things manually and keep all the components at the same depth. It would be great if I didn't have to do that but could nest an arbitrary amount of components to a "footer slot" or something like this.
My current work around:
<div id={styles.wizard}>
<Nav {...stepProps} {...this.props} data={navData} />
<StepWizard
onStepChange={this.onStepChange}
instance={this.setWizardInstance}
className={styles['wizard-content']}
>
<StepOne {...this.props} />
<StepTwo {...this.props} />
<StepThree {...this.props} />
<StepFour {...this.props} />
</StepWizard>
<Controls {...stepProps} {...this.props} />
</div>
Unfortunately this results some additional work since I have to recreate the step props for those Nav
and Controls
components and then I have to do some extra re-rendering based on the wizard instance state.
It would be a bit nicer if I could do something like this instead:
<StepWizard nav={<Nav />} slots={[<Component1 />, <Component 2 />]} />
Not sure about the feasibility of this but just another enhancement suggestion. I am thankful for the instance
addition because it at least allows me to work around it.
Thanks for your hard-work on this library!
Hello. I faced with some problem. My first step is Select and for each selection value I have config file with steps, because I need to change set of steps when I change select value. So, my render looks like
<StepWizard
isHashEnabled
isLazyMount
onStepChange={this.onStepChange}
>
{this.renderSelect()}
{steps.map(({ Component, key }) => (
<Component key={key} hashKey={key} />
))}
</StepWizard>
The problem is that StepWizard think that there are only two steps (Select and second), although config file (steps) contains list of steps. How I can solve it?
I'd like to request a new feature: navigation. Something like this: https://semantic-ui.com/elements/step.html. For that we need to know which steps are finished. Is it possible to integrate this?
Even with isLazyMount explicitly set to false, components mount before they are active.
This leads to problems, when some input from say step 1 is not yet defined in step 2.
Is this a bug or am I doing something wrong?
How can I disable transitions ?
Sorry but it's not issue , I have a question about transitions.
I'm using your code but I'm confused about transitions.If I want to use Fade transitions How should I use it !? :(
Could you remove the min-height attribute from step-wizard? It's breaking my layout.
Would be nice to have an onFinish event callback passed when the last step is reached. I want to handle the finish step through the wizard's parent. Let's say i want to call backend to save all the data from the wizard, it's not good for me to do it within the last step's component. Can't seem to find a way to pass a callback prop to this wizard, is there any way?
Thanks.
if i want to capture form data from Step 3, or 4, i use the update function like in the First step below.
But the update function returns Type error : update is not a function
const update = (e) => {
props.update(e.target.name, e.target.value);
};
when isLazyMount set true, user action records cannot be retainedใ Like the value of the input box in the previous step
It would be great if the library (optionally) allowed for zero-indexed steps. For one, it creates confusion when using the optional nav prop that the nav implementation is an array (zero-indexed). Similar issues arise if the steps themselves are an array of components.
When trying to install the package directly from github it does not work:
yarn add https://github.com/jcmcneal/react-step-wizard
And results in:
Module not found: Can't resolve 'react-step-wizard' in 'C:\Source\create-react-app\src'
This is due to invalid main property in package.json_ of dist/react-step-wizard.min.js
which should be src/index.js
.
I think that the npm package should not be minfiied dist. It prevents projects from overriding babel configuration with project-wide babel.config.json. Thank you.
Your component does not work with react-scripts
because of the css-loader you use:
import Styles from '../dist/styles.css';
You might have to mention that this does not work with react-scripts
or you might have to alter the way your styles are imported.
Hi all,
I am new to React and have not much knowledge of the component.
May I ask how to use the previous and next function in order to switch through steps?
Below is my current code. Thanks.
<StepWizard isLazyMount={true} initialStep={this.currentStep}>
<div>
Step 1
<p><button onClick={()=>{
this.currentStep--;
this.forceUpdate();
}}>Previous Step</button></p>
<p><button onClick={()=>{
this.currentStep++;
this.forceUpdate();
}}>Next Step</button></p>
</div>
<div>Step 2</div>
<div>Step 3</div>
<div>Step 4</div>
</StepWizard>
Thanks for any help.
If you have only one child component in the step wizard, you get this error
ร
TypeError: o.props.children.filter is not a function
a.getSteps
node_modules/react-step-wizard/dist/react-step-wizard.min.js:1
This is not an issue as much as a feature request. Is there any chance for swipeable mobile-enabled wizard in the feature? So to go to the previous step they could swipe to the left, and the next step swipe to the right? Any insight is greatly appreciated. Thanks!
This is more of a question than an issue. I wanted to use the initialStep prop to change the step, BUT I needed to do this after the component had already mounted. At least I think I need to do it this way.
Is there a way to control the step of the wizard from a prop even after it mounts? I appreciate any help. Thanks!
Here is my StepWizard:
''<StepWizard isLazyMount={true} initialStep={props.initialStep} ref={el => this.stepWizard = el}> ...some steps </StepWizard>
''
I change the initialStep prop on a setState in my app based on a button click.
Thanks!
It would be great if the goToStep
also supported named steps, e.g. goToStep("#billingAddress")
that is independent of the ordering of the steps (i.e. relative vs absolute).
I'm looking for some advice on how I might achieve a specific piece of functionality using this library. I'm ~90% there with my implementation but there are some bugs that I'm not sure if it's just me or not. What I'm trying to do is the following:
What I'm struggling with specifically is 3. I have an exitLeft
transition that sets display: block
on the step. However, I don't see a way to correctly manage the applied classes. For example, if my path through questions is 1 > 4 > 7 and then I reset back to 1, then 7 is correctly hidden but 4 is not because it isn't actively transitioning.
Any advice regarding this is greatly appreciated.
Hi, i've been trying to use your example, but i can't get it to work, i've tried from a fresh react project, using the same setup (even babel 6 and babel loader 7) but it prompts out that error:
n.props.children.forEach is not a function.
Do you have any idea what could be wrong?
Hi guys,
I have a problem with the container-height, where I am basically experiencing this issue here and get white-space under the footer (https://stackoverflow.com/questions/34188161/remove-white-space-below-footer)
When i enable isLazyMount
the first step looks good, but after going to the next step the white-space appears.
Has anyone got the same problem and knows a solution?
Maybe I''m missing something but I guess this is a feature request, would it be possible to pass data to the onStepChange
handler?
Especially when going to the next step this would really help for a lot of functionalities that can be built with this I think, like one example where user has to enter data on some of the steps and the parent component can use this to update state, or do you have better suggestions?
This could also maybe change the steps as you are going through it depending on which data is entered.
My use case is that I want to display a title for each step in the navbar.
My current solution is to create a new array and render navbar items by mapping it.
It would be nice if Nav component can get just the hashkeys of all children rendered in StepWizard component. It can also be some other prop if not hashKeys.
Something like this would be helpful in my case.
<StepWizard nav={<Nav />}>
<StepA hashKey='A' />
<StepB hashKey='B' />
<StepC hashKey='C' />
</StepWizard>
const Nav = ({ hashKeys }) => {
console.log(hashKeys);
// => ['A', 'B', 'C']
}
It would be great if, I can just map an array prop to display my navbar items.
The following error occurs when there is only a single child passed to StepWizard
:
Uncaught TypeError: o.props.children.forEach is not a function
You may want to consider guarding against this at least for developer sanity :)
The following series of warnings are generated when children are inlined instead of abstracted into their own components:
VM10074:794 Warning: React does not recognize the
totalSteps
prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasetotalsteps
instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Repro test case:
const Wizard = () =>
<StepWizard>
<div>1</div>
<div>2</div>
</StepWizard>;
Admittedly not best practice but there are use cases for structuring an app this way (small prototype, for example).
Hi, thank you for your work. Can you provide types for typescript?
When we use function components the result of child.type is a function and when we test this.isReactComponent we received function... thats ok. But when execute the app the props have not been passed to child.
If the current active step had lower height than the next step, next step button are clickable
see here: https://www.dropbox.com/s/yjh7nu46xzmfn64/simplescreenrecorder-2019-04-04_10.21.11.mp4?dl=0
I have a "creation flow" that requires a payment form if the user hasn't got a credit card attached to their account. So this step is conditional, and looks like this:
This throws an error if they do have a card source attached since that step is null.
Here's the solution I used to fix it in my forked version:
If you'd like me to submit a PR, I'd be glad to.
Hi
Maybe I am doing something wrong but I noticed that all my steps components render at once. Is there away to stop this?
Hello! ๐
I'm following the instructions you have regarding moving the Navigation bar to the bottom of the screen but no matter how I try to style to the StepWizard component it just doesn't seem to work. I tried regular css styling by applying a className
, inline styling with the style
prop and I've also tried wrapping it in a styled-component
but nothing works. The StepsWizard component is used in a simple functional component, I've also tried converting it to a class component, that didn't work either. I would really appreciate your help! ๐
Dynamic loading is better when there is more content in each step
Im getting the following error when trying to use the stepwizard
TypeError: o.props.children.filter is not a function
a.getSteps
node_modules/react-step-wizard/dist/react-step-wizard.min.js:1
SW.currentStep does not change
const InstanceDemo = ({ SW }) => ( <Fragment> <h4>{SW.currentStep}</h4> <button className="bg-sc-purple text-white" onClick={SW.previousStep}> Previous Step </button> <button className="bg-sc-purple text-white" onClick={SW.nextStep}> Next Step </button> </Fragment> );
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.