v3.4.1

Improvement:

In usetheform if a Field gets unmounted its value within the Form state gets cleared. Wrap your Field elements between the <PersistStateOnUnmount /> component to preserve the Fields values.

Example:

const Example = () => {
  const [visible, toggle] = useState(false)
  return (
    <Form>
      <PersistStateOnUnmount>
        {!visible && (
          <Collection object name="user">
            <Input type="text" name="name" value="abc" />
            <Input type="text" name="lastname" value="foo" />
          </Collection>
        )}
        <Input type="text" name="other" />
      </PersistStateOnUnmount>
      <button type="button" onClick={() => toggle(prev => !prev)}>
        Toggle Collection
      </button>
    </Form>
  )
}

v3.4.0

Improvement:

• Enabling sync and async validation at form level
• Improving documentation

Example:

 const graterThan10 = ({ values }) =>
    values && values['A'] + values['B'] > 10 ? undefined : 'A+B must be > 10'

function App() {
  const [status, validation] = useValidation([graterThan10])
  return (
    <Form touched {...validation}>
      <Collection object name="values">
        <Input type="number" name="A" value="1" />
        <Input type="number" name="B" value="2" />
      </Collection>
      {status.error && <label>{status.error}</label>}
      <button type="submit">Press to see results</button>
    </Form>
  );
}

v3.3.1

Improvement:

• Typescript declaration file for supporting the use of usetheform within typescript projects

declare module "usetheform" {
    export const Form: any;
    export const Input: any;
   ....
}

v3.3.0

Improvement:

• innerRef prop can be passed to Form - Input - Select - TextArea
• setValue added to useField({ type="custom"})

Example:

const CustomField = ({ name }) => {
  const { value, setValue } = useField({ type: "custom", name, value: "5" });
  const onSetValue = () => setValue(prev => ++prev)
  
  return (
    <pre>
      <code data-testid="output">{JSON.stringify(value)}</code>
      <button type="button" onClick={onSetValue}>Set Value</button>
    </pre>
  );
};

function App() {
  const formRef = useRef();
  const inputRef = useRef();

  return (
    <Form innerRef={formRef} >
      <Input  innerRef={inputRef}  type="text" name="user" value="BeBo" />
    </Form>
  );
}

v3.2.1

Improvement:

• Fix initial value undefined issue when passed as prop for useField - Input - Select - Collection - TextArea

Example:

const CustomField = ({ name }) => {
  const { value } = useField({ type: "text", name, value: "5" });

  // Now, value it is defined since the first render => value = "5"
  // does not need to wait for the <Form /> to be READY

  return (
    <pre>
      <code data-testid="output">{JSON.stringify(value)}</code>
    </pre>
  );
};

function App() {
  return (
    <Form>
      <Input type="text" name="user" value="BeBo" />
      <CustomField name="other"  />
    </Form>
  );
}

v3.2.0

Improvement:

• useSelector : useSelector(selector: Function) allows to pick a single "Field" from the Form state using a selector function.
• Update documentation.
• Some code refactoring.

Example:

function Counter() {
  const [counter, setCounter] = useSelector(state => state.counter)
  return <span>{counter}</span>
}

v3.1.0

Improvement

• Collection now accepts touched prop for sync validation
• Form is now exported as Named Exports

v3.0.0

Improvement

• Async and Sync fields validation
• Added withIndex HOC
• Fix Input type number issue
• Fix react strict mode errors
• Documentation
• Added new codesandbox examples
• Removing unused code

v2.0.1

Npm fixes

• Fix npm vulnerabilities

v2.0.0

Changes

• SSR fully supported
• Added new codesandbox examples
• Documentation improvement