Introduce the sicilian

Sicilian is a form state management tool that operates based on global state. It supports TypeScript and is compatible with React.js version 18 or higher.

In the frontend field, react-hook-form, a widely used form state management tool, operates based on refs. Because of this, you need to wrap components with forwardRef or use the useFormContext provided by the library. As a developer using Next.js, these limitations can be quite inconvenient.

Sicilian was developed to address these inconveniences by operating based on global state. This means Sicilian manages each input as state, helping you create forms using a controlled component approach. Sicilian internally utilizes React’s Context API to globally manage form state, allowing you to access and manipulate form state from any component without the need for separate global state management libraries (e.g., Redux, Zustand).

What’s new in sicilian@3.1.0

• Now supports runtime validation using zod, yup, and superstruct.
• Fixed a bug where the register function was not working properly with type=“radio”.
• The validateOptions function, which can be used more generally instead of handleValidate, has been added.
• A new CLI feature has been added to easily generate code snippets. For more details, please refer to the CLI Usage page.

Installation

Sicilian is available as a package on NPM for use:

npm i sicilian@latest
pnpm add sicilian@latest
yarn add sicilian@latest
bun add sicilian@latest

Quick Start

Let’s create a simple form using Sicilian.

import { useForm } from '@ilokesto/sicilian'; // Adjust path as needed
 
export default function MySimpleForm() {
  const { register, handleSubmit, getErrors } = useForm({
    initValue: {
      name: '',
      email: ''
    },
    validator: {
      name: {
        required: { required: true, message: 'Please enter your name.' }
      },
      email: {
        required: { required: true, message: 'Please enter your email.' },
        RegExp: {
          RegExp: /^[a-zA-Z0-9+-_.]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$/,
          message: 'Invalid email format.'
        }
      }
    }
  });
 
  const onSubmit = (data) => {
    console.log('Form submitted data:', data);
    alert(`Form submitted successfully!\nName: ${data.name}\nEmail: ${data.email}`);
  };
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="name">Name:</label>
        <input id="name" {...register({ name: 'name', type: 'text' })} />
        {getErrors('name')}
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input id="email" {...register({ name: 'email', type: 'email' })} />
        {getErrors('email')}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}