Nested inputs example

Here's a more complex example that uses more of the React Nuclear features:

Party input🛠️

1

1

VIP

1

1

VIP

1

1

VIP

1

You can check all the values that React Nuclear keeps track of by clicking the 🛠️ icon next to "Party input".

I've also included a number to the left of each input that shows how many re-renders have happened for that input.

Source:

import { F, Devtools } from "react-nuclear";
import TextInput from "@site/src/components/TextInput";
import { Layout } from "@site/src/components/Layout";
import Divider from "@site/src/components/Divider";
import Checkbox from "@site/src/components/Checkbox";
import Button from "@site/src/components/Button";

const partySchema = F.Group({
  name: F.Text({ required: true }),
  invitees: F.List({
    isVip: F.Toggle(),
    name: F.Text({ required: true }),
  }),
});

export default function NestedExampleComponent() {
  const partyInput = F.useInit(partySchema, {
    initValue: {
      invitees: [
        { name: "Anne", isVip: true },
        { name: "Bob" },
        { name: "Carl" },
      ],
    },
  });

  return (
    <Layout.Module>
      <Layout.Section
        title="Party input"
        badge={<Devtools state={partyInput} />}
      >
        <Layout.VStack gap={8}>
          <TextInput placeholder="Party name" {...partyInput.name} />
          <Divider />
          {partyInput.invitees.map((invitee, i) => (
            <Layout.Stack gap={16} key={invitee.listId}>
              <Checkbox {...invitee.isVip} title="VIP" />
              <TextInput {...invitee.name} placeholder="Name" />
              {i !== 0 && (
                <Button
                  onClick={() => F.control(partyInput.invitees).move(i, i - 1)}
                  title="⬆️"
                />
              )}
              {i !== partyInput.invitees.length - 1 && (
                <Button
                  onClick={() => F.control(partyInput.invitees).move(i, i + 1)}
                  title="⬇️"
                />
              )}
              <Button
                onClick={() => F.control(partyInput.invitees).removeAt(i)}
                title="x"
              />
            </Layout.Stack>
          ))}
          <Layout.Stack gap={4}>
            <Button
              onClick={() => F.control(partyInput.invitees).append()}
              title="Add"
            />
          </Layout.Stack>
        </Layout.VStack>
      </Layout.Section>
    </Layout.Module>
  );
}