React-form-blocks NPM

react-form-blocks

library for creation react form components

API

Form

Form replaces html form element. Whole form should be inside this form component or some component built upon it. Form acts as a context provider, so without it rest components won't work...

Form can have several props:

onChange: when form has some changes, it fires this function with one parameter (form facade)
values: set of initial values. For example, form containing two fields named 'first' and 'second' can be populated with object {first: "value1", second: 2} sent as values prop.

Field

Field serves as a platform for making input components.

Props:

render: standard render prop
children: if function, it is used to render input field
component: component to play as an input field
onChange: when field has some changes, it fires this function with one parameter (field facade)
onBlur: actions to happend when blur event occurs
name (required): name of the field, it should be valid JS identifier
value: initial value
noValue: field doesn't send value to rendered component (for cases it has its own state)
valueName: field sends its value to lower components as 'value', if it's not handy, it can be renamed to value of this prop
extractValue: function to extract value from change event of lower component
edit: edit inputed value, function receives to parameters - current value and next value - and returns value to be used as a new value
sync: edit value by values of other fields, it receives one parameter - fields - containing facades of all form's fields and returns new value for the field
watch: field name or array of field names to watch (i.e. to fire sync function after their change)
type: field type, e.g. 'text', 'checkbox' etc.
hide: hides lower components when true
disabled: disable field when true

Button

Message

View

Displays value based on fields values

name (required): name of the view, it should be valid JS identifier
hide: hides lower components when true
render: standard render prop
children: if function, it is used to render view
component: component to play as an view
onChange: when view has some changes, it fires this function with one parameter (view facade)
sync: edit value by values of fields, it receives one parameter - fields - containing facades of all form's fields and returns new value for the view
watch: field name or array of field names to watch (i.e. to fire sync function after their change)
display: indicates when to display view element, based on DISPLAY enum