30 | Features
31 | You get full control over all tags and styles
32 |
33 | Do you prefer {''}
s over {''}s?
34 | Do you prefer inline styles over class names? It's all up to you! You remain control over how your forms are rendered.
35 |
36 |
Define your custom behaviour for validation
37 |
38 | Do you want to indicate validation errors while the user is typing?
39 | Do you want to treat erros sent from the server differently?
40 | React-Reform allows you to consistently define such behaviours accross all your forms.
41 |
42 |
Low level
43 |
44 | Take a look at the recipes to see what kind of stuff React Reform allows you to do. Sure, being low level means that you've got quite some stuff to write to get production-ready themes. But you'll be rewarded with a very concise way of creating powerful and consistent forms.
45 |
46 |
Small
47 |
48 | React Reform comes with 0 dependencies.
49 | It also leaves out all optional things like default inputs and validation rules out of the core.
50 |
51 |
52 |
53 | )
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/doc-engine/src/pages/Recipes.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {Scaffold, H1, H2, H3, SubH1, Code, P, Section, AppliedCode} from 'comps/layouts'
3 |
4 | export default class Examples extends React.Component {
5 |
6 | render() {
7 |
8 | return (
9 |
10 | Recipes
11 | See some typical patterns in action
12 |
13 | Add a * to all required fields
14 | When rendering a field, see if there's a validation with name === 'required':
15 | {require('raw!comps/recipes/required-with-stars')}
16 |
17 |
18 |
19 | Custom button text
20 | Look at the directProps passed to the Form and filter out a buttonLabel prop:
21 | {require('raw!comps/recipes/custom-button-text')}
22 |
23 |
24 |
25 | Multiple submit buttons
26 | Approach 1: Create a theme
27 |
28 | If it's a recurring feature within your application it may be worth creating a explicit theme for this.
29 | renderForm offers a submitForm callback which allows you to pass additional arguments to the onSubmit handler:
30 |
31 | {require('raw!comps/recipes/multiple-submit-theme')}
32 |
33 | Approach 2: Create a custom handler in your form
34 |
35 | Here we're creating a theme that allows to have no button by default. So instead we're passing our own buttons to the form.
36 | The second button is our submit button and will execute the default onSubmit handler.
37 | The first button gets an onClick handler which calls handleSubmit on the form's ref.
38 | This function expects an event as an argument. Instead of this, we just pass a string signaling to the submit handler that this is a special case.
39 |
40 | Calling handleSubmit will perform all validation checks, so your onSubmit won't be called if there's still invalid data.
41 | {require('raw!comps/recipes/multiple-submit-inline')}
42 |
43 |
44 |
45 | Submit on blur
46 | submitForm is also available in the renderField function. This can be called when the input is blurred.
47 | There's a special case here. When validation fails, React Reform focusses the first invalid field by default. In our submit-on-blur case however, this would result in focussing the field immediately blurring if there's an validation error. This behaviour can be skipped via setting dontFocusAfterFail on the field.
48 | {require('raw!comps/recipes/submit-on-blur')}
49 |
50 |
51 |
52 | Dynamic fields
53 | When using a controlled form you can render your form using different fields or validation rules:
54 | {require('raw!comps/recipes/dynamic-fields')}
55 |
56 |
57 |
58 | )
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/doc-engine/src/pages/docs/Form.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {Scaffold, H1, H2, H3, P, Code, Section, Link, AppliedCode} from 'comps/layouts'
3 |
4 | export default class Form extends React.Component {
5 |
6 | render() {
7 | return (
8 |
9 | Form
10 |
11 | Let's have a look of what using your themes and writing some actual forms looks like.
12 |
13 |
14 | Controlled vs uncontrolled forms
15 | When writing your form you need to decide whether your form should be controlled or uncontrolled. I.e do you need to keep track of all the form changes via onFieldChange and inform the form via a changed model? Or is it sufficient to maybe provide an initialModel and only get to know the field values in the onSubmithandler?
16 | In most cases the less complex uncontrolled forms will be fine. But sometimes you need to be aware of the field values to change the render output accordingly. This is when controlled forms come in handy.
17 | Uncontrolled form example
18 | {require('raw!comps/recipes/form-uncontrolled')}
19 |
20 | Controlled form example
21 | {require('raw!comps/recipes/form-controlled')}
22 |
23 |
24 |
25 | Form props
26 | theme: (string|themeObj)
27 | Defaults to 'default'. You may either pass a string referencing a theme name that you defined via ReformContext or you may pass a theme object created via createTheme.
28 | onSubmit: fn(data, event) => (Promise?)
29 | The onSubmit handler will be called once the form was submitted and all fields' validations returned true.
30 | The data is an object with the fields' names as keys and their values as the value.
31 | You may return a promise to indicate to the theme that there's no result yet. The status within the renderFormFn will be 'pending'.
32 | If the promise gets resolved the form gets reset and a 'success' status will be set.
33 | You may also reject the promise. You have two options. If you know the field(s) that led to the error you may reject like this: {'reject({fieldName: \'is not unique\'})'}. If the error is more generic, reject with a string or react element: {'reject(the server responded with a {code} message)'}
34 | initialModel (optional) uncontrolled forms only.
35 | You may pass in initial data in the form of an object mapping field name to values. These values will be used when the form is mounted or reset.
36 | model controlled forms only.
37 | Passing a model prop signals to the form that it's an controlled form. It expects an object mapping field name to values. Field values won't be changed unless you explicitely change the model.
38 | onFieldChange: fn(fieldName, value) controlled forms only.
39 | This handler allows you to react to fieldChange request. Most typically it looks like the one form the controlled form example above.
40 | You may return false to indicate that no change has happened. This will prevent the input from becoming isDirty.
41 | children
42 | Pass your inputs here. It's perfectly fine to pass in non-inputs here as well. So a form like this will work:
43 | {`
44 |
56 | `}
57 |
58 |
59 | Form instance methods
60 | You may attach a ref prop to the form. This ref officially supports some methods you might want to take advantage of.
61 | reset()
62 | Sets the form inputs to an untouched state.
63 | {'checkForErrors() => ({hasErrors, firstInvalidFieldName})'}
64 | In case you'd like to validate the form without submitting it. Call this method. You can use the firstInvalidFieldName to focus the relevant input (see below).
65 | focusField(fieldName)
66 | Calls focuses the input by executing the focusFn(node) method according to it's definition on the WrapInput component.
67 |
68 |
69 | )
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/doc-engine/src/pages/docs/Optional.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {Scaffold, H1, H2, H3, P, Code, Section, Link} from 'comps/layouts'
3 |
4 | export default class Optional extends React.Component {
5 |
6 | render() {
7 | return (
8 |
9 | Optional validations and inputs
10 |
11 | React Reform comes with some validations and wrapped inputs out of the box. They are not included in the main bundle. I.e. if you don't explicitely require them they won't be added to your build.
12 | Also there's no magic in here. Have a look at the sources to learn what's going on here.
13 |
14 |
15 | Inputs
16 | You can require them via react-reform/opt/inputs. Take a look below at all the inputs in use:
17 | {`
18 | import {Form, ReformContext} from 'react-reform'
19 | import {Text, Textarea, Password, Select, Checkbox} from 'react-reform/opt/inputs'
20 |
21 | ...
22 |
23 |