3.2.1 • Published 1 year ago
react-sliding-form v3.2.1
react-sliding-form
- Easily build sliding forms (multi-step optional) inside of a mui dialog popup. (live example can be found at https://www.carbodylab.com/)
- Conveniently collect all data gathered in each step only when you need to (reduce the use of context and re-renders caused by passing state down).
- Store all state logic inside of each step themselves, rather than using a context or passing state down. Allow each step to validate itself and inform react-sliding-form when it is complete.
- Conveniently determine when to disable or enable "next" buttons for you, by passing each child (step) of react-sliding-form a setIsReady function, freely called by each child when complete.
What this does
Allows you to easily build sliding forms (multi-step optional) inside of a dialog popup like the three screenshots below:
How to use SlidingForm
import { Box, Dialog, Button } from '@mui/material
import { SlidingForm } from 'react-sliding-form'
import Slide1 from './Slide1'
import Slide2 from './Slide2'
import Slide3 from './Slide3'
import Slide4 from './Slide4'
import { styles } from './styles'
const slideItems = [
{ slide: Step1, label: 'Vehicle' },
{ slide: Step2, label: 'Photos' },
{ slide: Step3, label: 'Contact' },
{ slide: Step4 }
]
const Container = () => {
const submitRequest = data = () => fetch('https://www.arrontaylor.me/submit_request', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
return (
<Box>
<Dialog open={open}>
<SlidingForm
slideItems={slideItems}
submitAction={v => submitRequest(v)}
closeAction={() => setOpen(false)}
styles={styles}
/>
</Dialog>
<Button onClick={_ => setOpen(true)}> Open Dialog </Button>
</Box>
}
How to write each step
- Make sure to consume the properties
{ setIsReady, refValue }
- Make sure to use the
useElevateChildState
hook and pass it all of the values you want to keep track of, along with the refValue prop, and finally a list of dependencies. - When the step is considered "ready", call the
setIsReady
function with the current "ready state" of the step. - Once the step calls setIsReady, the buttons in the stepper will automatically update to allow for "next".
import React, { useState, useEffect } from 'react'
import { TextField, Box } from '@mui/material'
import { useElevateChildState } from 'react-sliding-form'
const Step3 = ({ setIsReady, refValue, currentData }) => {
const [zip, setZip] = useState(null)
const [name, setName] = useState(null)
const [phone, setPhone] = useState(null)
const [email, setEmail] = useState(null)
const nameIsValid = name && name.trim().length > 1
const phoneIsValid = phone && /\d{10}/.test(phone)
const zipIsValid = zip && /^\d{5}$/.test(zip)
const emailIsValid =
email && /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(email)
// currentData is an up to date global state of all steps
const contactIsValid =
(nameIsValid && phoneIsValid && zipIsValid && emailIsValid) || false
setIsReady(contactIsValid)
useElevateChildState({ zip, name, phone, email },
refValue, [zip, name, phone, email])
return (
<Box>
<Box>
Enter your contact details Full name
<TextField
onChange={e => setName(e.target.value)}
value={name || ''}
placeholder='Full Name'
/>
<br />
Phone
<TextField
onChange={e => setPhone(e.target.value)}
value={phone || ''}
placeholder=' (123) 456 — 7890 '
/>
<br />
Your email
<TextField
onChange={e => setEmail(e.target.value)}
value={email || ''}
placeholder='email@example.com'
/>
<br />
Zip code
<TextField
onChange={e => setZip(e.target.value)}
value={zip || ''}
placeholder='5-Digit ZIP Code'
/>
</Box>
</Box>
)
}
export default Step3
2.0.9
2 years ago
3.0.4
1 year ago
3.2.1
1 year ago
3.0.3
1 year ago
3.2.0
1 year ago
3.0.2
1 year ago
3.0.1
1 year ago
3.0.0
1 year ago
2.1.1
1 year ago
2.0.11
1 year ago
2.0.10
1 year ago
2.1.0
1 year ago
3.1.0
1 year ago
2.0.8
2 years ago
2.0.7
2 years ago
2.0.6
2 years ago
2.0.5
2 years ago
2.0.4
2 years ago
2.0.3
2 years ago
2.0.2
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.0.24
2 years ago
1.0.23
2 years ago
1.0.22
2 years ago
1.0.21
2 years ago
1.0.20
2 years ago
1.0.19
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago