use-form-field

    2.1.1 • Public • Published

    use-form-field

    An unopionated react form context library using hooks and the context API.

    Install

    npm install use-form-field

    Documentation

    useFormField

    useFormField(name, (controlled = false));

    Options

    name - string name to use for the form field.

    controlled - boolean optional Whether field is going to be controlled or not. Ultimately this will assume you are using the ref as opposed to the value and not trigger a re-render on value changes.

    Example

    import { useFormField } from "use-form-field";
     
    const UncontrolledInput = ({ name }) => {
      const { set, ref, error } = useFormField(name);
     
      const handleChange = e => {
        set(e.target.value, true);
      };
     
      return (
        <React.Fragment>
          <input name={name} type="text" onChange={handleChange} ref={ref} />
          {error}
        </React.Fragment>
      );
    };

    useForm

    useForm({ withValues = false, onChange });

    Options

    withValues - boolean optional Whether to return complete values object. This will cause re-renders on change

    onChange - function optional Function containing object of changed values.

    Example

    import { useForm } from "use-form-field";
     
    const Form = () => {
      const { get, isValid } = useForm();
      const [values, setValues] = useState(undefined);
     
      const handleSubmit = e => {
        e.preventDefault();
        setValues(get());
      };
     
      return (
        <React.Fragment>
          <form onSubmit={handleSubmit}>
            <UncontrolledInput name="field" />
            <br />
            <button type="submit" disabled={!isValid}>
              Submit
            </button>
          </form>
          {values && JSON.stringify(values)}
        </React.Fragment>
      );
    };

    FormProvider

    <FormProvider />

    Options

    values - object optional An object containing values to set field values to.

    schema - object optional A yup compatible schema for automatic validation

    children - Children can be React elements or a function, if using a function you will receive the return value from useForm() and you may pass additional props to FormProvider that will be used as arguments for useForm().

    Example (JSX)

    import { FormProvider } from "use-form-field";
     
    const App = () => (
      <FormProvider>
        <Form />
      </FormProvider>
    );

    Example (Function)

    import { FormProvider } from "use-form-field";
     
    const App = () => (
      <FormProvider withValues>
        {({ values, isValid }) => (
          <React.Fragment>
            <Form />
            {[JSON.stringify(values), " ", isValid ? "valid" : "invalid"]}
          </React.Fragment>
        )}
      </FormProvider>
    );

    Full example with dynamic fields

    import { FormProvider, useForm, useFormField } from "use-form-field";
    import { object, string } from "yup";
     
    const initialValues = {
      field1: "field 1",
      field2: "field 2"
    };
    const validationSchema = object().shape({
      field1: string().max(20),
      field2: string().max(20)
    });
     
    const ControlledInput = ({ name }) => {
      const { set, value, error } = useFormField(name, true);
     
      const handleChange = e => {
        set(e.target.value, true);
      };
     
      return (
        <React.Fragment>
          <input name={name} type="text" onChange={handleChange} value={value} />
          {error}
        </React.Fragment>
      );
    };
     
    const UncontrolledInput = ({ name }) => {
      const { set, ref, error } = useFormField(name);
     
      const handleChange = e => {
        set(e.target.value, true);
      };
     
      return (
        <React.Fragment>
          <input name={name} type="text" onChange={handleChange} ref={ref} />
          {error}
        </React.Fragment>
      );
    };
     
    const Form = () => {
      const { get, isValid } = useForm();
      const [values, setValues] = useState(undefined);
      const [fields, setFields] = useState(["field1", "field2"]);
     
      const handleSubmit = e => {
        e.preventDefault();
        setValues(get());
      };
     
      const handleFlip = () => {
        setFields([...fields.reverse()]);
      };
     
      return (
        <React.Fragment>
          <form onSubmit={handleSubmit}>
            <ControlledInput name={fields[0]} />
            <br />
            <UncontrolledInput name={fields[1]} />
            <br />
            <button type="button" onClick={handleFlip}>
              Flip
            </button>
            <button type="submit" disabled={!isValid}>
              Submit
            </button>
          </form>
          {values && JSON.stringify(values)}
        </React.Fragment>
      );
    };
     
    const App = () => (
      <FormProvider values={initialValues} schema={validationSchema}>
        <Form />
      </FormProvider>
    );

    Install

    npm i use-form-field

    DownloadsWeekly Downloads

    1

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    31 kB

    Total Files

    7

    Last publish

    Collaborators

    • jstans