SicilianProvider component and useSicilianContext hook

Previously, developers often used the spread operator to apply the props returned by register directly onto input elements. While convenient, this can cause the entire form to re-render when an input changes.

<input {...register('email', validator.email)}>

To avoid that, provide register and name as separate props and compose them inside the Input component rather than spreading. However, that pattern narrows the types of register and name and complicates passing them as props.

<SicilianProvider value={{ register, name: "" }}>
                                  // ~~~~ email
                                  //      nickname
                                  //      password
                                  //      passwordCheck
                                  //      agreeToTerms

  <Input />
</SicilianProvider>

Sicilian solves this by offering SicilianProvider and useSicilianContext. These use React Context internally and bundle a value object containing register, name, validate, type, getValues, and getErrors. register and name are required; other properties are optional and can be accessed by children via useSicilianContext. If no provider exists higher in the tree, the hook throws an error.

🚨 Sicilian Error : useSicilianContext must be used within a SicilianProvider

If getValues/getErrors are not provided to SicilianProvider but a descendant calls useSicilianContext for them, the hook returns functions that log an error to the console. This helps reveal where props are missing at runtime.

🚨 Sicilian Error : getValues property has not been passed to the SicilianProvider, but you are trying to use the getValues function.

Below is a compact Input example using SicilianProvider and useSicilianContext.

import { register, getValues, getErrors } from "@/hooks/FormController/signUp.ts"
import { SicilianProvider } from "@ilokesto/sicilian/provider"

export default function Home() {
  { ... }

  return (
    <>
      { ... }
      
      <SicilianProvider value={{ register, name: "email", getErrors }}>
        <Input />
      </SicilianProvider>

      <SicilianProvider value={{ register, name: "password", getErrors }}>
        <Input />
      </SicilianProvider>
      
      { ... }
    </>
  )
}

import { useSicilianContext } from "@ilokesto/sicilian/provider"

export default function Input({className, ...props}: InputHTMLAttributes<HTMLInputElement>) {
  const { register, name, validate, getErrors } = useSicilianContext()
  
  const errorMessage = getErrors(name)
  
  return (
    <>
      <input {...props} {...register({ name, validate })} className={clsx(styles.input, className)} />
      <Show when={!!errorMessage}>
        {errorMessage}
      </Show>
    </>
  );
}