Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/inshadowin/react-wizzard
Wizard for your forms that does exactly that and nothing more
https://github.com/inshadowin/react-wizzard
react wizard wizard-steps
Last synced: about 2 months ago
JSON representation
Wizard for your forms that does exactly that and nothing more
- Host: GitHub
- URL: https://github.com/inshadowin/react-wizzard
- Owner: Inshadowin
- Created: 2021-12-14T18:17:36.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-15T14:42:39.000Z (over 2 years ago)
- Last Synced: 2024-10-29T14:24:42.144Z (2 months ago)
- Topics: react, wizard, wizard-steps
- Language: JavaScript
- Homepage:
- Size: 1.26 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-wizzard-light
Lightweight React-Wizzard package
Serves purpose of control over stages and `onEnter` / `onLeave` events
Component is stateless, you need to provide state / onChange on your own
It's enough to have `[state, onChange] = useState({})` as there are no additional logic there
## Documenation
- `Wizzard` component. Core component that accepts children of `Wizzard.Stage` and `Wizzard.Consumer` type
`` Props:
```js
//
// Types:
//
type WizzardChild =
| React.ReactElement>
| React.ReactElement>;
type WizzardProps = {
defaultStage?: string,
state: T,
onChange: (newState: T) => void,
children: WizzardChild | WizzardChild[],
};
type WizzardStageProps = {
stage: string,
onEnter?: (state?: T, onChange?: (newState: T) => void) => void,
onLeave?: (state?: T, onChange?: (newState: T) => void) => void,
children:
| React.ReactElement>
| ((params: WizzardStageChildrenProps) => JSX.Element),
} ;
type WizzardConsumerProps = {
children:
| React.ReactElement>
| ((params: WizzardStageChildrenProps) => JSX.Element),
};
type WizzardStageChildrenProps = {
state?: T,
onChange?: (newState: T) => void,
stage?: string,
setStage?: (newStage: string) => void,
goBack?: (() => void) | null,
goNext?: (() => void) | null,
};
//
// Props:
//
// Wizzard
{
// Stage for Wizzard start. Defaults to first child stage
defaultStage?: string,
// object that has wizzard data
state: T, // - any type you use
// callback to track data change
onChange: (newState: T) => void
// Components that define stages
children: || // element
}
// WizzardConsumer
{
// Must contain element based on Component with WizzardStageChildrenProps consumption
// or render function
// or just a Node
children:
| React.ReactNode
| React.ReactElement>
| ((params: WizzardStageChildrenProps) => JSX.Element)
}
// WizzardStage
{
// Stage ID for Wizzard stage
stage?: string,
// Effect that takes place on stage enter.
// Second argument allows to consume change function, and do on-enter data change
onEnter?: (state?: T, onChange?: (newState: T) => void) => void,
// Effect that takes place on stage leave.
// Second argument allows to consume change function, and do on-leave data change
onLeave?: (state?: T, onChange?: (newState: T) => void) => void,
// Must contain element based on Component with WizzardStageChildrenProps consumption
// or render function
children:
| React.ReactElement>
| ((params: WizzardStageChildrenProps) => JSX.Element)
}
// WizzardStageChildrenProps
{
// Access to Wizzard state
state?: T,
// Function that allows to change state
onChange?: (newState: T) => void
// Stage ID passed
stage?: string,
// Function to enter any stage
setStage?: (newStage: string) => void,
// Function to move to the previous stage. is null if it's first stage
goBack?: (() => void) | null,
// Function to move to the next stage. is null if it's last stage
goNext?: (() => void) | null,
}
```
## Examples:
We have three stages with side-effects. Stage2Component is an example of component that consumes all props
```tsx
type StateType = {
text1: string;
text2: string;
text3: string;
};
const Stage2Component = ({
state,
onChange,
stage,
goNext,
goBack,
}: StageChildrenProps) => {
return (
<>
Stage #{stage}
onChange?.({ ...state, text2: e.target.value })}
/>
{!!goBack && goBack?.()}>Back}
{!!goNext && goNext?.()}>Next}
>
);
};
const OurWizzardExample = () => {
// component must use outer state
const [state, setState] = useState({
text1: '',
text2: '',
text3: '',
});
return (
{params =>
Stage from Consumer# {params.stage}}
alert('Entering Stage 1')}>
alert('Leaving Stage 2')}>
{props => Just a custom render}
);
};
```