Overview

Akiform is a high-level form management framework designed for React applications, providing an abstraction layer over React Hook Form. It integrates schema-based validation using Akival and offers seamless interoperability with UI component libraries.

Core Components

• Form State Management: Utilizing React Hook Form for optimized form state handling, Akiform manages user inputs, validation, and submissions efficiently.

• Schema Validation Integration: Incorporating Akival for declarative schema definition and validation, Akiform allows complex validation rules to be expressed clearly.

• UI Layer Interoperability: Akiform’s adaptors (Akiform and FormItem) facilitate integration with various UI frameworks, ensuring flexibility and adaptability.

Architectural Highlights

• Declarative API: Akiform’s API aligns with React’s philosophy, promoting readability and maintainability.

• Abstraction and Encapsulation: Simplifying the interface, Akiform abstracts the complexities of form state management and validation logic.

• Performance Optimization: Focused on performance, Akiform minimizes re-rendering, leveraging React Hook Form’s rendering optimizations.

• Scalability and Extensibility: Akiform’s modular design supports scalability and customization to meet specific requirements.

System Interaction and Data Flow

1. Form Initialization: Akiform sets up with default values and a validation schema, organizing the form’s state management and validation.

2. User Interaction: User inputs are captured and the form state is updated accordingly.

3. Validation Process: Continuous validation against the Akival schema provides real-time feedback and error management.

4. Form Submission: On submission, Akiform performs a final validation, processes data, and handles submission logic.

Examples

For more information and examples, you visit React Hook Form website .

Basic Form Example

import { useForm, akivalResolver, Akiform, FormItem } from '@akinon/akiform';
import * as akival from '@akinon/akival';
 
const schema = akival.object().shape({
  name: akival.string().required(),
  surname: akival.string().required()
});
 
export default function App() {
  const { control, handleSubmit } = useForm({
    resolver: akivalResolver(schema),
    defaultValues: {
      name: '...',
      surname: '...'
    }
  });
 
  const onSubmit = values => {};
 
  const onErrors = errors => {};
 
  return (
    <Akiform onFinish={handleSubmit(onSubmit, onErrors)}>
      <FormItem control={control} name="name" label="Name">
        <input />
      </FormItem>
      <FormItem control={control} name="surname" label="Surname">
        <input />
      </FormItem>
      <input type="submit" />
    </Akiform>
  );
}

Advanced Form Example

For more complex forms, Akiform supports integration with UI libraries like @akinon/ui-react.

import { Button, Input } from '@akinon/ui-react';
import { useForm, akivalResolver, Akiform, FormItem } from '@akinon/akiform';
import * as akival from '@akinon/akival';
 
const schema = akival.object().shape({
  username: akival.string().required().min(4).max(10),
  password: akival.string().required()
});
 
const App = () => {
  const { control, handleSubmit } = useForm({
    resolver: akivalResolver(schema),
    defaultValues: {
      username: 'john',
      password: '123456'
    }
  });
 
  const onSubmit = values => {};
 
  const onErrors = errors => {};
 
  return (
    <Akiform onFinish={handleSubmit(onSubmit, onErrors)}>
      <FormItem control={control} name="username" label="Username">
        <Input />
      </FormItem>
      <FormItem control={control} name="password" label="Password">
        <Input.Password />
      </FormItem>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Akiform>
  );
};
 
export default App;

You can learn about form validation with the Akival library here.