@basementscripts/use-form-state

Use Form State Hook

Examples

There are a few pieces necessary to property establish I/O with the form state.

Initial State

// state.ts
const initialState: any = {
	firstName: '',
	lastName: ''
}

export default initialState

// Component.tsx
import React from 'react'
import { useApolloClient } from '@apollo/client'
import { useStateReducer } from '@basementscripts/use-state-reducer'
import { useFormState } from '@basementscripts/use-form-state'
import { useAuth } from './auth/use-auth'
import intialState from './state'

// client prop is optional
const client: ApolloClient<any> = useApolloClient()
const { contextUser }: any = useAuth()

const Component = (props: any) => {
	const {
		form,
		data,
		erros,
		updateForm,
		updateData,
		pushError,
		clearError,
		resetForm,
		handleInputChnage
	}: any = useFormState({
		initialState,
		data: {
			account: contextUser.account
		},
		stateManager: useStateReducer,
		client
	})

	return (
		<form>
			<div>
				<label>
					First Name: <input name="firstName" value={form.firstName} onChange={handleInputChange} />
				</label>
			</div>
			<div>
				<label>
					Last Name: <input name="lastName" value={form.lastName} onChange={handleInputChange} />
				</label>
			</div>
		</form>
	)
}

export default Component