Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nutgaard/use-formstate
formstate library using hooks (react ^16.8)
https://github.com/nutgaard/use-formstate
Last synced: about 2 months ago
JSON representation
formstate library using hooks (react ^16.8)
- Host: GitHub
- URL: https://github.com/nutgaard/use-formstate
- Owner: nutgaard
- License: mit
- Created: 2019-07-22T06:17:37.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T04:45:13.000Z (almost 2 years ago)
- Last Synced: 2023-05-04T09:53:55.482Z (over 1 year ago)
- Language: TypeScript
- Size: 887 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# UseFormstate
[](https://github.com/prettier/prettier)
[](https://travis-ci.org/nutgaard/use-formstate)
[](https://david-dm.org/nutgaard/use-formstate?type=dev)
A react-hook for managing form values, errors and more
### Usage
**Preparations**
The form-shape and how it should be validated is defined using the `useFormstate` function.
Optimally this should be outside of your react-component.
```typescript jsx
type FormData = { // Don't use an interface here. Read me under "known issues"
name: string;
city: string;
hobby: string;
}
interface FormProps {
validate: boolean;
}
const initialState: FormData = {
name: '',
city: '',
hobby: ''
};
const validator = useFormstate({
name: (value) => value.length > 256 ? 'Thats a might long name' : undefined,
city: (value, values, props) => {
if (props.validate) {
return value.length === 0 ? 'Must provide a city' : undefined
}
return undefined;
},
hobby: (value, values, props) => {
if (values.city.length > 0 && props.validate) {
return value.length === 0 ? 'Hobby is required if city is provided' : undefined
}
return undefined;
}
});
```
As an alternative you may pass a function instead of an object to `useFormstate`.
This may useful in instances where form-elements are conditonally-validated, though the two approaches are functionally equivalent.
```typescript jsx
const validator = useFormstate((values, props) => {
const name = values.name.length > 256 ? 'Thats a might long name' : undefined;
const city = props.validate && values.city.length === 0 ? 'Must provide a city' : undefined;
const hobby = values.city.length > 0 && props.validate && values.hobby.length === 0 ? 'Hobby is required if city is provided' : undefined;
return { name, city, hobby };
});
```
**Use it**
```typescript jsx
function submithandler(values: FormData) {
return fetch('...Do your thing...');
}
function MyForm(props: Props) {
const state: Formstate = validator(initialState);
return (
Name:
{state.field.name.error ? state.field.name.error : undefined}
City:
{state.field.city.error ? state.field.city.error : undefined}
Hobby:
{state.field.hobby.error ? state.field.hobby.error : undefined}
Save
);
}
```
## Types
Most notable types are `Formstate` and `FieldState`:
**Formstate**
The returntype of calling `useFormstate(validation)(initialValues, props);`
```
submitting: boolean; // is the submithandler current running
pristine: boolean; // is 'values === initialValues'
valid: boolean; // is the form as a whole valid, e.g no errors
errors: { fieldnames: string };
fields: { fieldnames: FieldState }
```
**FieldState**
The type containing information for each field.
```
pristine: boolean; // is 'values === initialValues'
touched: boolean; // has this element had focus
initialValue: boolean; // initialValue as specified
error?: string; // this elements error if any
input: {
id: string;
name: string;
value: string;
onChange: ChangeEventHandler;
onBlur: FocusEventHandler;
};
```
# Known issues
### `interface` vs `type`
Its recommended to use `type` insteadof `interface` when defining your form-shape.
E.g
```typescript
// DON'T DO THIS
interface FormShape {
name: string;
}
// DO THIS
type FormShape = {
name: string;
}
```
The underlying issue can be better understood by read through this official issue; https://github.com/microsoft/TypeScript/issues/15300
## Credits
Made using the awesome [typescript library starter](https://github.com/alexjoverm/typescript-library-starter)