2.1.2 • Published 2 years ago
@blockle/form v2.1.2
@blockle/form
Install
yarn add @blockle/form
Usage
import React, { useState } from 'react';
import { Form, useField, useForm } from '@blockle/form';
interface UserForm {
name: string;
}
const MyForm = () => {
const form = useForm<UserForm>({
async submit(data) {
console.log('Form valid', data);
},
});
// See form.values, form.erors
return (
<Form form={form}>
<Input name="name" type="text" required />
<button disabled={invalid || submitting}>Submit</button>
</form>
);
}
// Input.tsx
interface Props {
name: string;
value?: string;
type: 'text' | 'password';
required: boolean;
}
const Input: FC<Props> = ({ name, value, type, required }) => {
const field = useField<string>({
name,
value,
validate(value) {
// Return string with "error code"
if(required && !value.trim()) {
return 'required';
}
return null;
}
});
return (
<input
type={type}
value={field.value}
onChange={(event) => field.setValue(event.currentTarget.value)}
onBlur={field.setTouched}
/>
);
}
2.1.2
2 years ago
2.1.1
3 years ago
2.1.0
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.0.1
3 years ago
1.0.0
4 years ago
1.0.0-alpha.0
4 years ago
0.0.1-alpha.13
4 years ago
0.0.1-alpha.12
4 years ago
0.0.1-alpha.11
4 years ago
0.0.1-alpha.10
5 years ago
0.0.1-alpha.9
5 years ago
0.0.1-alpha.8
5 years ago
0.0.1-alpha.7
5 years ago
0.0.1-alpha.6
5 years ago
0.0.1-alpha.5
5 years ago
0.0.1-alpha.4
5 years ago
0.0.1-alpha.3
5 years ago
0.0.1-alpha.2
5 years ago
0.0.1-alpha.1
5 years ago
0.0.1-alpha.0
5 years ago