Convert Figma logo to code with AI

edmundhung logoconform

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.

1,948
105
1,948
64

Top Related Projects

2,593

Source code spell checker

4,461

:pencil: A markup-aware linter for prose built with speed and extensibility in mind.

1,246

A Spell Checker for Code!

4,811

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

  1. 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>
  );
}
  1. 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>
  );
}
  1. 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:

  1. Install the library:

    npm install @conform-to/react @conform-to/zod zod
    
  2. 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>
      );
    }
    
  3. Customize validation rules and form submission logic as needed.

Competitor Comparisons

2,593

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.

4,461

: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.

1,246

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.

4,811

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

 ███████╗  ██████╗  ███╗  ██╗ ████████╗  ██████╗  ███████╗  ███╗ ███╗
██╔═════╝ ██╔═══██╗ ████╗ ██║ ██╔═════╝ ██╔═══██╗ ██╔═══██╗ ████████║
██║       ██║   ██║ ██╔██╗██║ ███████╗  ██║   ██║ ███████╔╝ ██╔██╔██║
██║       ██║   ██║ ██║╚████║ ██╔════╝  ██║   ██║ ██╔═══██╗ ██║╚═╝██║
╚███████╗ ╚██████╔╝ ██║ ╚███║ ██║       ╚██████╔╝ ██║   ██║ ██║   ██║
 ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝

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

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.