codesnips

controlled-components

javascript 
export const required = (msg = 'This field is required') => (value) =>
  value && value.trim() !== '' ? '' : msg;

export const minLength = (n, msg) => (value) =>
  value && value.length >= n ? '' : msg || `Must be at least ${n} characters`;

Field-by-Field Signup Validation with a Reusable useForm Hook in React

react hooks forms
by codesnips 4 tabs
javascript 
export const initialState = (steps, initialData = {}) => ({
  steps,
  stepIndex: 0,
  data: initialData,
  errors: {},
});

Multi-Step Form Wizard in React With a useReducer State Machine

react hooks usereducer
by codesnips 4 tabs
javascript 
import { useMemo, useCallback } from 'react';
import { useSearchParams } from 'react-router-dom';

function parseFilters(params) {
  return {
    q: params.get('q') || '',

Sync Filter State to the URL with a useSearchParams-Driven Filter Bar in React Router

react react-router hooks
by codesnips 3 tabs