@glzr/components
v1.0.2
Published
A component library for SolidJS.
Downloads
266
Maintainers
Readme
Type-safe transforms
const myForm = createForm({ age: '0' });
<Field
of={myForm}
path="age"
transform={{ in: val => Number(val), out: val => val.toString() }}
>
{(_, props) => <NumberInput {...props} />} // 'props.value' is typed as
number
</Field>;
Versus @modular-forms/solid
Field values can be objects or arrays.
- This makes it possible to bind complex types like
{ minDate: Date; maxDate: Date }
. The recommended way to do this in@modular-forms/solid
is very verbose.
- This makes it possible to bind complex types like
Form values are non-nullable. This means never having to non-null assert.
More flexible interface for interoping with custom form components.
- Custom form components simply need to take in
value
,onBlur
, andonChange
. - Easily bind components that don't have an underlying
input
,textarea
, orselect
element.
- Custom form components simply need to take in
Simpler handling of arrays.
- There is no need to use
FieldArray
. This reduces JSX nesting.
- There is no need to use
export function MyForm() {
const [fruitForm, { Form, Field, FieldArray }] = createForm({
initialValues: {
fruits: [
{
name: 'banana',
isTasty: true,
},
{
name: 'kiwi',
isTasty: false,
},
],
},
});
return (
<Form>
<FieldArray name="fruits">
{fieldArray => (
<>
<For each={fieldArray.items}>
{(_, index) => (
<Field name={`fruits.${index()}.isTasty`} type="boolean">
{(field, props) => (
<Checkbox {...props} value={field.value} />
)}
</Field>
)}
</For>
</>
)}
</FieldArray>
</Form>
);
}
vs. smorf:
Note that there's no need to pass the type
prop, or separately pass the
value
prop.
export function MyForm() {
const fruitForm = createForm({
fruits: [
{
name: 'banana',
isTasty: true,
},
{
name: 'kiwi',
isTasty: false,
},
],
});
return (
<form>
<For each={fruitForm.value.fruits}>
{(_, index) => (
<Field of={fruitForm} path={`fruits.${index()}.isTasty`}>
{(field, props) => <Checkbox {...props} />}
</Field>
)}
</For>
</form>
);
}