react-wizard-primitive - npm Package Compare versions

react-wizard-primitive

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.1.0 to 1.1.1

CHANGELOG.md

		@@ -0,2 +1,6 @@
		## 1.1.1 (February 8, 2019)
		- added live examples in README
		- fixed spelling / grammar in README

		## 1.1.0 (February 6, 2019)
		- added support for _moveToStep_ and _resetToStep_ functions in useWizard and Wizard component, which were previously only available at step level.

package.json

		{
		"name": "react-wizard-primitive",
		"version": "1.1.0",
		"version": "1.1.1",
		"description": "A react wizard primitive - built with hooks!",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

		@@ -28,2 +28,3 @@ <h1 align="center">
		- [Step](#step)
		- [Examples](#examples)

		@@ -33,3 +34,3 @@ ## The Problem
		You need to implement a wizard / stepper, but have specific UI requirements.
		You want a flexible solution that suits a wide range of use cases.
		You want a flexible solution that suits a wide range of use cases. Check out [the examples](#examples) to see what's possible.

		@@ -112,3 +113,3 @@ ## The Solution

		Returns state for the current Step. This needs to be called per wizard step you want to render.
		Returns state for the current Step. This needs to be called for each wizard step you want to render.
		First call will return informations about the first step, second call about the second, etc.
		@@ -140,5 +141,5 @@
		The Wizard component uses useWizard internally and exposes a compound components API via Context.
		Use this as a top level component for the wizard and put any number of _WizardSteps_ in them.
		Use this as a top level component for the wizard and put any number of _WizardSteps_ in it.

		You can _optionally_ provide a render prop, which gets passed the same return values as useWizard.
		You can _optionally_ provide a render prop, which gets passed the same values that _useWizard_.

		@@ -180,30 +181,21 @@ ### WizardStep
		<Wizard>
		{
		({activeStepIndex}) => <div>

		Active Step is: {activeStepIndex}

		<WizardStep>
		{({ isActive, nextStep }) =>
		isActive && <div onClick={nextStep}>Step 1</div>
		}
		</WizardStep>

		<WizardStep>
		{({ isActive, nextStep }) =>
		isActive && <div onClick={nextStep}>Step 2</div>
		}
		</WizardStep>

		<WizardStep>
		{({ isActive, nextStep }) =>
		isActive && <div onClick={nextStep}>Step 3</div>
		}
		</WizardStep>
		</div>
		}
		{({ activeStepIndex }) => (
		<div>
		Active Step is: {activeStepIndex}
		<WizardStep>
		{({ isActive, nextStep }) =>
		isActive && <div onClick={nextStep}>Step 1</div>
		}
		</WizardStep>
		<WizardStep>
		{({ isActive, nextStep }) =>
		isActive && <div onClick={nextStep}>Step 2</div>
		}
		</WizardStep>
		<WizardStep>{({ isActive, nextStep }) => isActive && <div onClick={nextStep}>Step 3</div>}</WizardStep>
		</div>
		)}
		</Wizard>
		```


		## Step
		@@ -255,1 +247,46 @@
		Set this step to be currently active. All following steps will keep the activated state.

		## Examples

		You can build nearly anything on top of react-wizard-primitive.
		Take a look at those examples to get an idea of what's possible.

		### [🔗 Basic Hooks](https://codesandbox.io/s/93z0j38q0y)

		> This is a good starting point, if you want to see a basic hook implementation.
		> A classical wizard, which displays the steps one after the other.

		![Basic Example](https://media.giphy.com/media/2UoCNCX8SH2hxY2hQA/giphy.gif)

		### [🔗 Basic Render Props](https://codesandbox.io/s/ppq9zx3zj7)

		> Same example, but implemented with the render props API.

		### [🔗 Buildup Wizard](https://codesandbox.io/s/6j65768yqr)

		> This example demonstrates, how you can build a wizard that displays the steps one after another, but keeps the already displayed steps around.

		![Buildup Wizard](https://media.giphy.com/media/fxzFlmPaffmgImTpM7/giphy.gif)

		### [🔗 Custom Abstraction](https://codesandbox.io/s/wwo9x7p1k)

		> It can get tedious to work with the basic building blocks and repeat styling or display handling all over again. This example demonstrates how you can build your own abstractions on top of react-wizard-primitive.

		```jsx
		<MyCustomWizard>
		<MyCustomWizard.Step>
		<TextFields />
		</MyCustomWizard.Step>
		<MyCustomWizard.Step>
		<div>Just some other inline jsx</div>
		</MyCustomWizard.Step>
		<MyCustomWizard.Step>
		<div>And another one</div>
		</MyCustomWizard.Step>
		<MyCustomWizard.Step>
		<div>Last one</div>
		</MyCustomWizard.Step>
		</MyCustomWizard>
		```

		![Buildup Wizard](https://media.giphy.com/media/8PBsWFyO1haMFsbQLp/giphy.gif)

Improved metrics