conform
A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
Top Related Projects
Source code spell checker
:pencil: A markup-aware linter for prose built with speed and extensibility in mind.
A Spell Checker for Code!
Catch insensitive, inconsiderate writing
A framework for managing and maintaining multi-language pre-commit hooks.
Quick Overview
Conform is a lightweight form validation library for React applications. It provides a simple and flexible way to handle form state and validation, with support for both synchronous and asynchronous validation rules.
Pros
- Lightweight and minimalistic, with a small bundle size
- Flexible validation rules, including support for async validation
- Easy integration with React components
- TypeScript support for type safety
Cons
- Limited built-in validation rules compared to some other form libraries
- Requires more manual setup compared to more opinionated form libraries
- Documentation could be more comprehensive
- Smaller community and ecosystem compared to more popular form libraries
Code Examples
- Basic form validation:
import { useForm } from '@conform-to/react';
import { parse } from '@conform-to/zod';
import { z } from 'zod';
const schema = z.object({
username: z.string().min(3),
email: z.string().email(),
});
function MyForm() {
const [form, { username, email }] = useForm({
onValidate: ({ formData }) => parse(formData, { schema }),
});
return (
<form {...form.props}>
<input {...username.props} />
{username.error && <span>{username.error}</span>}
<input {...email.props} />
{email.error && <span>{email.error}</span>}
<button>Submit</button>
</form>
);
}
- Async validation:
import { useForm } from '@conform-to/react';
function MyForm() {
const [form, { username }] = useForm({
onValidate: async ({ formData }) => {
const errors = {};
const username = formData.get('username');
if (await isUsernameTaken(username)) {
errors.username = 'Username is already taken';
}
return errors;
},
});
return (
<form {...form.props}>
<input {...username.props} />
{username.error && <span>{username.error}</span>}
<button>Submit</button>
</form>
);
}
- Form submission:
import { useForm } from '@conform-to/react';
function MyForm() {
const [form, fields] = useForm({
onSubmit: async (formData) => {
await submitFormData(formData);
},
});
return (
<form {...form.props}>
{/* Form fields */}
<button>Submit</button>
</form>
);
}
Getting Started
To use Conform in your React project, follow these steps:
-
Install the library:
npm install @conform-to/react @conform-to/zod zod
-
Import and use the
useForm
hook in your component:import { useForm } from '@conform-to/react'; import { parse } from '@conform-to/zod'; import { z } from 'zod'; const schema = z.object({ // Define your form schema }); function MyForm() { const [form, fields] = useForm({ onValidate: ({ formData }) => parse(formData, { schema }), }); return ( <form {...form.props}> {/* Add your form fields and use fields.fieldName.props */} </form> ); }
-
Customize validation rules and form submission logic as needed.
Competitor Comparisons
Source code spell checker
Pros of typos
- Specialized tool for spell-checking and typo detection in code and documentation
- Supports multiple programming languages and file formats
- Highly customizable with ignore lists and custom dictionaries
Cons of typos
- Limited to spell-checking functionality
- May require more setup and configuration for specific project needs
- Less integrated with CI/CD workflows compared to Conform
Code Comparison
Conform (JavaScript):
export default {
checks: [
{
name: 'subject',
level: 'error',
rule: ({ subject }) => subject.length <= 50,
message: 'Subject must not exceed 50 characters',
},
],
};
typos (TOML configuration):
[default]
extend-ignore-re = [
"^Cargo.lock$",
"^LICENSE",
]
[default.extend-words]
crate = "crate"
While Conform focuses on commit message validation and general project conformity, typos specializes in spell-checking and typo detection across various file types. Conform offers a more comprehensive approach to project consistency, including commit message formatting and other custom checks. On the other hand, typos provides a dedicated solution for identifying and correcting spelling errors in code and documentation, with support for multiple languages and customizable dictionaries.
:pencil: A markup-aware linter for prose built with speed and extensibility in mind.
Pros of Vale
- More comprehensive linting capabilities, supporting various markup formats (Markdown, AsciiDoc, reStructuredText)
- Extensive rule customization options and pre-built style packages
- Active development and larger community support
Cons of Vale
- Steeper learning curve due to more complex configuration
- Primarily focused on prose linting, less suitable for code-specific checks
- Requires separate installation and setup, not integrated into CI/CD by default
Code Comparison
Vale configuration example:
StylesPath = styles
MinAlertLevel = suggestion
[*.md]
BasedOnStyles = Vale, proselint
Conform configuration example:
enforce:
rules:
- name: commit-message
description: Enforce commit message format
script: scripts/commit-message.sh
While both tools focus on enforcing standards, Vale is more oriented towards prose and documentation linting, whereas Conform is designed for general repository conformance checks, including commit messages and code style.
A Spell Checker for Code!
Pros of cspell
- More comprehensive spell-checking capabilities, supporting multiple languages and customizable dictionaries
- Larger community and more frequent updates, with over 2,000 GitHub stars
- Integrates well with various text editors and IDEs through extensions
Cons of cspell
- Primarily focused on spell-checking, lacking the broader configuration validation features of Conform
- May require more setup and configuration for custom dictionaries and project-specific terms
- Can potentially flag valid technical terms or code snippets as misspellings
Code Comparison
cspell configuration example:
{
"version": "0.2",
"language": "en",
"words": ["customword", "anotherterm"],
"ignoreWords": ["ignoredword"],
"import": ["@cspell/dict-typescript/cspell-ext.json"]
}
Conform configuration example:
policies:
- type: commit
spec:
header:
length: 72
imperative: true
body:
required: true
While cspell focuses on spell-checking configuration, Conform provides a broader scope for validating various aspects of project configuration and commit messages. The choice between the two depends on the specific needs of the project, with cspell excelling in spell-checking and Conform offering more versatile configuration validation.
Catch insensitive, inconsiderate writing
Pros of Alex
- Focuses specifically on identifying insensitive, inconsiderate writing
- Provides detailed explanations and suggestions for improvements
- Has a wider range of use cases beyond just code (e.g., documentation, articles)
Cons of Alex
- Less flexible in terms of customization compared to Conform
- May not be as suitable for enforcing general coding style guidelines
- Requires more setup and configuration for use in CI/CD pipelines
Code Comparison
Alex:
var alex = require('alex');
alex('He\'s pretty set in his ways.').messages;
// [ { message: '`He` may be insensitive, use `They`, `It` instead',
// name: 'he-she',
// reason: '`He` may be insensitive, use `They`, `It` instead',
// line: 1,
// column: 1,
// source: 'retext-equality' } ]
Conform:
import { Conform } from '@edmundhung/conform';
const conform = new Conform({
rules: {
'no-console': 'error',
'max-len': ['error', { code: 80 }]
}
});
const results = conform.lint('console.log("This is a very long line that exceeds the maximum length limit");');
A framework for managing and maintaining multi-language pre-commit hooks.
Pros of pre-commit
- Wider language and tool support, with a large ecosystem of hooks
- More mature project with extensive documentation and community support
- Flexible configuration allowing for local and project-specific hooks
Cons of pre-commit
- Requires Python installation and setup
- Can be more complex to configure for simple use cases
- May introduce additional dependencies for each hook
Code Comparison
pre-commit configuration example:
repos:
- repo: https://github.com/pre-commit/pre-commit-hooks
rev: v4.1.0
hooks:
- id: trailing-whitespace
- id: end-of-file-fixer
conform configuration example:
{
"checks": [
{
"name": "trailing-whitespace",
"command": "grep -rl '[[:blank:]]$' ."
}
]
}
Both tools aim to improve code quality through pre-commit hooks, but they differ in approach and complexity. pre-commit offers a more comprehensive solution with a wide range of pre-built hooks, while conform provides a simpler, JavaScript-based alternative that may be easier to set up for Node.js projects. The choice between them depends on project requirements, team preferences, and existing development environment.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
ââââââââ âââââââ ââââ âââ âââââââââ âââââââ ââââââââ ââââ ââââ
âââââââââ âââââââââ âââââ âââ âââââââââ âââââââââ âââââââââ âââââââââ
âââ âââ âââ âââââââââ ââââââââ âââ âââ âââââââââ âââââââââ
âââ âââ âââ âââââââââ ââââââââ âââ âââ âââââââââ âââââââââ
âââââââââ âââââââââ âââ âââââ âââ âââââââââ âââ âââ âââ âââ
ââââââââ âââââââ âââ ââââ âââ âââââââ âââ âââ âââ âââ
Version 1.2.2 / License MIT / Copyright (c) 2024 Edmund Hung
A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
Getting Started
Check out the overview and tutorial at our website https://conform.guide
Features
- Progressive enhancement first APIs
- Type-safe field inference
- Fine-grained subscription
- Built-in accessibility helpers
- Automatic type coercion with Zod
Documentation
- Validation: https://conform.guide/validation
- Nested object and Array: https://conform.guide/complex-structures
- UI Integrations: https://conform.guide/integration/ui-libraries
- Intent button: https://conform.guide/intent-button
- Accessibility Guide: https://conform.guide/accessibility
Support
To report a bug, please open an issue on the repository at https://github.com/edmundhung/conform. For feature requests and questions, you can post them in the Discussions section.
Top Related Projects
Source code spell checker
:pencil: A markup-aware linter for prose built with speed and extensibility in mind.
A Spell Checker for Code!
Catch insensitive, inconsiderate writing
A framework for managing and maintaining multi-language pre-commit hooks.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot