wking-io

import { AnimatePresence, motion, Variants } from 'framer-motion'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { forwardRef, PropsWithChildren, useState } from 'react'
import clsx from 'clsx'

export default function Page() {
	const [open, setOpen] = useState(false)
	return (
		<div>
			<button onClick={() => setOpen(true)}>Open Modal</button>

wking-io

Custom useForm

Inertia comes with a form helper called useForm. However, it requires controlled inputs. This is not best practice for React, but by itself is not a deal breaker. Then I ran into nested data and array data...typed nested object updates is not fun or clean.

So, I built my own version of the useForm hook that allows you to give control back to the DOM. Here is how it works:

• No manual data updates
• Data is pulled from the form element on submit and converted into a FormData instance.
• FormData supports File, nested keys, and array values by default.
• Can still reset using a key.

wking-io

import {
	createContext,
	type PropsWithChildren,
	useContext,
	type RefObject,
} from 'react'
import { useHeadlessAudio } from '#app/hooks/useHeadlessAudio.js'
import { type PropsWithClassName } from '#app/types.js'

type AudioPlayerState = {

wking-io

<form method="POST" action="https://forms.reform.app/headless/s2Aazx/customer-success-application/71t642/submissions">
    <div>
        <label for="f8d5111a-10e2-44b1-9b07-70d5083ec5a6">What's your name?</label>
        <input 
            type="text"
            id="f8d5111a-10e2-44b1-9b07-70d5083ec5a6"
            name="answers[f8d5111a-10e2-44b1-9b07-70d5083ec5a6]"
            placeholder="Jane Smith"
            required
        />

wking-io

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--gray-50: 250 250 250;
	--gray-100: 244 244 245;
	--gray-200: 228 228 231;
	--gray-300: 161 161 170;
	--gray-400: 212 212 216;

wking-io

import { Combobox } from "@headlessui/react";
import {
  ChevronUpDownIcon,
  PlusIcon,
  XMarkIcon,
} from "@heroicons/react/24/solid";
import { useActionData, useLocation, useTransition } from "@remix-run/react";

import { useCallback, useEffect, useRef, useState } from "react";
import { useShowModal } from "~/components/impl/Modal";

wking-io

function ExampleForm() {
  const submit = useSubmit()
  const formRef = useRef<HTMLFormElement>(null)
    
  const submitOnChange = useCallback(() => {
    if (formRef?.current) {
      submit(formRef.current, { replace: true })
  }, [formRef, submit])
    
  return (

wking-io

<Form method="post" className="space-y-6">
  <div>
    <label
      htmlFor="email"
      className="block text-sm font-medium text-gray-700"
    >
      Email address
    </label>
    <div className="mt-1">
      <input

wking-io

/movie/$movieSlug/$socialSlug/$mediaSlug

- movie
-- $movieSlug
--- index.tsx
--- $socialSlug.tsx
--- $socialSlug.$mediaSlug.tsx

/movie/$movieSlug/$tabOne/$tabTwo

wking-io

<div class="inside-article text-center max-w-xl mx-auto w-5/6 py-16">
	<header class="" aria-label="Content">
		<h1 class="font-extrabold text-gray-900" itemprop="headline">Thank you</h1>
	</header>
  <div class="entry-content" itemprop="text">
    <p class="has-text-align-center"><strong>Thank you for starting your trial! We have sent you an email with your credentials.</strong><br><br>If you need any help, do not hesitate to contact us.</p>
  </div>
</div>