1.1.8 • Published 8 months ago
ffw v1.1.8
FFW
Ffw is form package. Ffw implements partial subscription to certain fields.
Main goals of ffw:
- subscription to certain fields
- api that looks like formik
- performance
- convenience improvement
Setting
import {useGlobalFfw, FfwProvider} from 'ffw';
import AgeListener from './age-listener';
function App() {
const form = useGlobalFfw({
initValues: {
age: 42,
name: 'Robbin',
},
});
return (
<FfwProvider value={form}>
<User />
<Age />
</FfwProvider>
);
}
export default App;
Using
import {useFfw} from 'ffw';
function User() {
const form = useFfw(
// list fields to subscribe
'name',
'age'
);
return (
<div>
<input {...form.fields.name.getInputField()} />
<input {...form.fields.age.getInputField()} />
</div>
);
}
export default User;
or
import {useFfwField} from 'ffw';
function Age() {
const ageField = useFfwField('age');
return <input {...ageField.getInputField()} />;
}
export default Age;
API
type FormProps = {
initValues?: Record<string, any>;
validateSchema?: any; // yup schema
options?: {
validateOnChange: boolean;
validateOnBlur: boolean;
validateOnMount: boolean;
};
onSubmit?: (form: Form) => void;
};
useInitFfw
function useInitFfw(options: FormProps): Form; // init form
FfwProvider
<FfwProvider value={form} /> // pass form to the context
useFfa
function useFfa(fieldName1: string, fieldName2: string, ...): Form // subscribe to fields and get form
useFfaField
function useFfaField(fieldName: string): Form; // subscribe to field and get form
Form
class Form {
fields: Record<string, Field>;
validate(): Promise<boolean>;
submit: () => Promise<void>;
reset(): void;
setErrors(errors: Record<string, string>): void;
setValue(name: string, value: any): void;
setTouched(name: string, touched: boolean): void;
setError(name: string, error: string): void;
setTouches(touches: Record<string, boolean>): void;
setValues(values: Record<string, any>): void;
getErrors(): Record<string, string>;
getTouches(): Record<string, boolean>;
get values(): Record<string, any>;
get errors(): Record<string, string>;
get touches(): Record<string, boolean>;
getValues(): Record<string, any>;
batch(cb: any): void;
}
Field
class Field {
value: any;
touched: boolean;
error: string;
name: string;
setError(error: string): void;
setTouched(touched: boolean): void;
set(value: any): void;
validate(): Promise<boolean>;
onChange: (event) => void;
onBlur: () => void;
getInputProps: () => {
value: any;
name: string;
onChange: (event) => void;
onBlur: () => void;
};
getSelectProps: () => {
value: any;
name: string;
onChange: (value: any) => void;
onBlur: () => void;
};
}
1.1.8
8 months ago
1.1.7
9 months ago
1.1.6
9 months ago
1.1.5
12 months ago
1.1.4
12 months ago
1.1.3
12 months ago
1.1.1
1 year ago
1.0.26
2 years ago
1.0.25
2 years ago
1.0.24
2 years ago
1.0.29
2 years ago
1.0.28
2 years ago
1.0.27
2 years ago
1.0.30
2 years ago
1.0.19
2 years ago
1.0.22
2 years ago
1.0.21
2 years ago
1.0.20
2 years ago
1.0.23
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.11
3 years ago
1.0.12
3 years ago
1.0.10
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago