react-nuclear v0.0.4

Highlights

• Handles arbitrarily complex input shapes
• Type-safe
• Composable
• Developer friendly
• Performant
• Extensible
• Headless
• 0 dependencies

Installation

npm install react-nuclear

Basic usage

Input cell

function TestInput() {
  const inputState = F.useInit(F.Text())
  return <Input title="Boop" {...inputState} />
}

Input group

const userSpec = F.Group({
  firstName: F.Text(),
  lastName: F.Text(),
})

function UserForm() {
  const userInput = F.useInit(userSpec)

  return (
    <Layout.VStack>
      <YourCustomInput title="First name" {...userInput.firstName} />
      <YourCustomInput title="Last name" {...userInput.lastName} />
    </Layout.VStack>
  )
}

Input list

const todoListSpec = F.Group({
  title: F.Text(),
  items: F.List({
    description: F.Text(),
    isComplete: F.Toggle(),
  }),
})

function TodoListForm() {
  const todoListInput = F.useInit(todoListSpec)

  return (
    <Layout.VStack>
      <YourCustomInput title="Title" {...todoListInput.title} />
      {todoListInput.items.map((itemInput) => (
        <Layout.HStack key={itemInput.listId}>
          <YourCustomInput placeholder="Description" {...itemInput.description} />
          <YourCustomCheckbox {...itemInput.isComplete} />
        </Layout.HStack>
      ))}
    </Layout.VStack>
  )
}