T
TanStack•2y ago
extended-salmon

Making a hook that encapsulates a form

HI im trying to figure out how to do this: 
export function useSitemaps(): UseSitemapsReturnObject {
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
  const schema = z.object({  homepageUrl: z.string()});

  const homepageUrlForm = useForm({
    mode: "onBlur",
    reValidateMode: "onChange",
    resolver: zodResolver(schema),
    defaultValues: {
      homepageUrl: "",
    },
  });

// now i have the form, i want to get the homepageUrl value, and make a dirivitive value (sitemapUrl)
// does it go in a useEffect? In state?

  let { homepageUrl } = sitemapUrlForm.getValues();
  if (!homepageUrl.endsWith("/")) {
    homepageUrl = `${homepageUrl}/`;
  }
  const sitemapUrl = inferSitemapUrl(homepageUrl);

 return {  sitemapUrlForm, homepageUrl, sitemapUrl }
export function useSitemaps(): UseSitemapsReturnObject {
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
  const schema = z.object({  homepageUrl: z.string()});

  const homepageUrlForm = useForm({
    mode: "onBlur",
    reValidateMode: "onChange",
    resolver: zodResolver(schema),
    defaultValues: {
      homepageUrl: "",
    },
  });

// now i have the form, i want to get the homepageUrl value, and make a dirivitive value (sitemapUrl)
// does it go in a useEffect? In state?

  let { homepageUrl } = sitemapUrlForm.getValues();
  if (!homepageUrl.endsWith("/")) {
    homepageUrl = `${homepageUrl}/`;
  }
  const sitemapUrl = inferSitemapUrl(homepageUrl);

 return {  sitemapUrlForm, homepageUrl, sitemapUrl }
1 Reply
afraid-scarlet
afraid-scarlet•2y ago
Well, I don't think getValues is what you want. Probably need to use form.useStore((state) => state.valuse.homepageUrl) so that is subscribes to it in the hook and re-runs when it changes.

Did you find this page helpful?