Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elisherer/hyperapp-forms
3KB Hyperapp form state management library
https://github.com/elisherer/hyperapp-forms
Last synced: 27 days ago
JSON representation
3KB Hyperapp form state management library
- Host: GitHub
- URL: https://github.com/elisherer/hyperapp-forms
- Owner: elisherer
- License: mit
- Created: 2018-06-25T08:02:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-07-21T20:50:44.000Z (over 6 years ago)
- Last Synced: 2024-10-31T06:22:06.633Z (about 1 month ago)
- Language: JavaScript
- Size: 23.4 KB
- Stars: 9
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- hyperawesome - elisherer/hyperapp-forms - Form state management library (similiar to redux-form) (Utilities V1)
README
[](https://badge.fury.io/js/hyperapp-forms)
# hyperapp-forms
Hyperapp form state management library
* Simple
* Small in size (3kb minified)
**Heavily inspired by [`redux-form`](https://redux-form.com/)**
## Installation
```
npm i -S hyperapp-forms
```
## Usage
### Import
Add the imported actions object contents to the main actions object.
```js
import forms from 'hyperapp-forms';
..
const actions = {
..
...forms,
};
..
app(state,actions,view,document.body);
```
### Field components
Wrap your input components with the `Field` decorator.
Textbox.js
```js
import { h } from 'hyperapp';
import {Field} from "hyperapp-forms";
const Textbox = ({ input, type, name, title, disabled }) => {
const showError = (input.touched || input.submitted) && !!input.error;
return (
{title}
{showError && {input.error}}
);
};
export default Field(Textbox);
```
The attributes the `Field` decorator adds to the component are:
|Attribute|Type|Description|
|---|---|---|
|form|string|The form's name|
|name|string|The field's name|
|validate|function(form, name, values) : Object |A validate function to run after change
## Actions
### `changeAndValidate({ form, name, value, validate })`
Changes a value for a certain field, also runs the `validate` function and updates the sync errors accordingly.
`validate` is a callback with the following structure `validate(form, name, values)` (see explanation above).
### `touch({ form, name })`
Sets the field as been touched.
### `startSubmit({ form })`
Sets the form's status to be submitting
### `stopSubmit({ form, errors })`
Sets the form's status to be not submitting, and apply server errors by matching field names.
## Selectors
|Selector|Description|
|---|---|
|`getFormValues(state, form)`|Get an object with the form values|
|`isSubmitting(state, form)`|Is the form submitting|
|`isValid(state, form)`|Is the form valid (are there any errors)|
|`wasSubmitted(state, form)`|Was the form submitted at least once (useful for showing errors)|
|`getFieldValue(state, form, field)`|Get a certain field value|
|`getFieldError(state, form, field)`|Get a certain field error|
|`isFieldTouched(state, form, field)`|Was field touched (useful for showing errors)|
## Submission and error handling
`handleSubmit(state, actions, form, callback)`
Use `handleSubmit` in the form's onsubmit (or any button's callback, see example below),
Supply a callback function which will return a promise, which at first will start the form's submission automatically.
And once resolved or rejected will stop the form's submission.
The callback function needs to be in the following structure:
`callback(values, actions) : Promise`
The resolve or reject argument should be
## Usage example
Checkout a working example: [hyperapp-less-boilerplate](https://github.com/elisherer/hyperapp-less-boilerplate)
```js
const signIn = (values, actions) => new Promise((resolve, reject) => {
setTimeout(() => {
if (values.username === 'test') {
actions.login.login();
resolve();
}
else {
reject({ username: 'Not "test"!'});
}
}, 2000);
});
const validate = (form, name, values) => {
let errors = null;
const usernameInvalid = !/^t/.test(values.username);
if (usernameInvalid) {
if (!errors) errors = {};
errors.username = 'not starting with t!';
}
const passwordInvalid = !values.password;
if (passwordInvalid) {
if (!errors) errors = {};
errors.password = 'password is required!';
}
return errors; // if everything is valid, returns null
};
export default (state, actions) => {
const submitting = isSubmitting(state, 'login');
return (
Login to your account:
Sign In
{submitting &&
}
);
});
```