A react hook for email validation with axios
when your application needs to ensure a user provided email is unique to the app
- react
- axios
- lodash.debounce
npm run build
npm link
npm link use-email{
// the axios request config
// https://axios-http.com/docs/req_config
axiosConfig,
// the milliseconds to delay a server call between email input keystrokes
delay,
// a callback handed the axios error for requests with a status of 300+; defaults to console.log
onFetchError
}The axios request config shape is here. Set the entire server endpoint on the baseURL prop; the url prop is disregarded.
// useEmail.js
import createEmailHook from 'use-email'
const validateEmailEndpoint = 'http:https://localhost:8080/validate-email'
const axiosConfig = {
baseURL: validateEmailEndpoint,
withCredentials: true
}
const emailHookConfig = {
axiosConfig,
delay: 300,
onFetchError: console.log
}
const useEmail = createEmailHook(emailHookConfig)
export default useEmail// EmailInput.js
import useEmail from './useEmail'
const EmailInput = () => {
const {
email,
isDuplicateEmail,
isEmailUniq,
isFetchingEmail,
isValidEmail,
onChangeEmailInput
} = useEmail()
const style = { color: isValidEmail ? 'black' : 'red' }
return (
<>
<input value={email} onChange={onChangeEmailInput} style={style} />
{isFetchingEmail && <p>Fetching...</p>}
{isUniqEmail && <p>Email is ok</p>}
{isDuplicateEmail && <p>A user with {email} exists</p>}
</>
)
}email: String - the value of the email input, to be set as the input value
isDuplicateEmail: Boolean - email has been determined by the server to be a duplicate
isEmailUniq: Boolean - email has been determined by the server to be yet unused
isFetchingEmail: Boolean
isValidEmail: Boolean - the current email value is a valid email according to this test
onChangeEmailInput: Function - the onChange handler for the email input
Axios sends a post request to the baseURL endpoint (passed to the hook config) with an email payload prop
{ "email": "[email protected]" }The client expects a response from the server with this shape
{ "data": { "isEmailUniq": true } }and will then update the isEmailUniq hook prop. Only booleans signal a valid response.
// test middleware
export default function isEmailUniq(req, res) {
const isEmailUniq = Math.random() < 0.5
res.json({ isEmailUniq })
}- Each hook call handles a unique email input. Return all the props in one hook call; don't split as below.
const Spinner = () => {
// nope; always false
const { isFetchingEmail } = useEmail()
return !isFetchingEmail ? null : <Loader />
}
const EmailInput = () => {
const { email, onChangeEmailInput } = useEmail()
return (
<>
<input value={email} onChange={onChangeEmailInput} />
<Spinner />
</>
)
}- The route should likely be guarded.