Neoanthropic Preternatural Murmurings

    fielder
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    Fielder logo

    Fielder

    A field-first form library for React and React Native.

    build version size coverage docs

    About

    Fielder is a form library for React and React Native that has been built from the ground up with a field-first approach to validation.

    Features

    ⚡️ Synchronous validation - no cascading renders

    🛎 Validation events - validation can differ per event (change, blur, submit, etc.)

    🪝 Hooks that work - hooks respond to validation changes

    🧠 Evolving schemas - validation logic evolves with the UI

    Basic usage

    Install Fielder

    Add Fielder to your project.

    npm i fielder

    Import the module

    Use fielder or fielder/preact.

    // React
    import { useForm, ... } from 'fielder';
    
    // Preact
    import { useForm, ... } from 'fielder/preact';

    Set up a form

    Use the useForm hook to create a form.

    const myForm = useForm();
    
    return <FielderProvider value={myForm}>{children}</FielderProvider>;

    Create some fields

    Use the useField hook to create a field.

    const [usernameProps, usernameMeta] = useField({
      name: 'username',
      initialValue: '',
      validate: useCallback(({ value }) => {
        if (!value) {
          throw Error('Username is required!');
        }
      }, []),
    });
    
    return (
      <>
        <input type="text" {...usernameProps} />
        <span>{usernameMeta.error}</span>
      </>
    );

    Additional info

    Once you're all set up, be sure to check out the guides for a deeper dive!

    Additional resources

    For more info, tutorials and examples, visit the official docs site!

    Also check out:

    Install

    npm i fielder

    DownloadsWeekly Downloads

    417

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    239 kB

    Total Files

    65

    Last publish

    Collaborators

    • andyrichardson