rkta-form
v0.0.10
Published
A normal, catch-all form for react.
Downloads
4
Maintainers
Readme
Why?
Let's make react forms normal again.
How?
<Form onFormSubmit={dispatchAuth}>
<input name="name" />
<input name="password" />
</Form>
Docs
Coming soon...
Examples
Validated form example:
import React from 'react';
import Form, { Error } from 'rkta-form';
import makeValidator from 'rkta-validator';
import makeSchema from './schema';
const toFloat = (string) => {
const float = parseFloat(string);
return Number.isNaN(float) ? undefined : float;
};
const prevalidate = ({ minimum, maximum, ...form }) => ({
...form,
minimum: toFloat(minimum),
maximum: toFloat(maximum),
prevalidate: 'prevalidate hook allows to modify form data, before validation',
});
const validate = makeValidator(makeSchema);
const postvalidate = form => ({
...form,
postvalidate: 'postvalidate hook allows to modify form data, after validation',
});
const ChangeForm = () =>
<Form
prevalidate={prevalidate}
validate={validate}
postvalidate={postvalidate}
onFormChange={console.log}
onFormSubmit={console.log}
>
<div>
<strong>Text</strong>
<br />
<input type="text" name="text" />
<Error name="text" />
</div>
<br />
<div>
<strong>Minimum</strong>
<br />
<input type="text" name="minimum" />
<Error name="minimum" />
</div>
<br />
<div>
<strong>Maximum</strong>
<br />
<input type="text" name="maximum" />
<Error name="maximum" />
</div>
<button type="submit">
Submit
</button>
</Form>;
export default ChangeForm;
More examples are in examples/form
.