react-nuclear
v0.0.2
Published
Type-safe, composable, and performant input states.
Downloads
163
Maintainers
Readme
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>
)
}