Update Listener/AnyListener jsdoc

Author: CodeStix

src/Components.tsx

@@ -40,8 +40,7 @@ export function ArrayField<
 
 /**
  * Wrapper around useListener
- * Listen for changes on a form's field. Behaves like useState.
- * You shouldn't use this hook in large components, as it rerenders each time something changes. Use the wrapper <Listener /> instead.
+ * Renders using the provided render function each time the provided field changes. When no render function is provided, the current field value will be rendered as a string.
  * @param form The form to listen on.
  * @param name The form's field to listen to.
  */
@@ -57,8 +56,7 @@ export function Listener<
 
 /**
  * Wrapper around useAnyListener.
- * Listens for any change on this form. Behaves like useState.
- * You shouldn't use this hook in large components, as it rerenders each time something changes. Use the wrapper <AnyListener /> instead.
+ * Renders using the provided render function each time something in the form changes. When no render function is provided, a JSON representation of the form values is displayed.
  * @param form The form that was passed in.
  */
 export function AnyListener<T extends object, State = DefaultState, Error extends DefaultError = DefaultError>(props: {

testing/src/Fieldform.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useForm, Field, AnyListener, FieldError, FormField } from "typed-react-form";
+import { useForm, Field, AnyListener, FieldError, FormField, Listener } from "typed-react-form";
 
 function Input(props: { value?: string; onChange?: (value: string) => void; style: React.CSSProperties }) {
     return <input style={{ padding: "0.3em", ...props.style }} value={props.value} onChange={(ev) => props.onChange?.(ev.target.value)} />;
@@ -39,6 +39,9 @@ export function FieldForm() {
                 <option value="male">male</option>
                 <option value="female">female</option>
             </Field>
+            <p>
+                value: <Listener form={form} name="firstName" />
+            </p>
             <pre>
                 <AnyListener form={form} render={() => JSON.stringify(form.values, null, 2)} />
             </pre>