react-logic-block

Utils and components for using logic-block in react apps.

Typescript

The library originally written in typescript, so it fully support typescript. Provided types:

• FieldValidateFunction
• FieldInput
• FieldComponentProps
• FormErrors
• FormContextType
• FormProps
• Form

The Form component implemented with generics, it is pretty cool to use it with it.

//block description
type FormValues = { data: string; };
type FormUtil = { calcDataHash: () => string; };
const SomeBlock = Block<FormValues, FormUtil>({ ... });

//... at some component
<Form<FormValues, FormUtil> block={SomeBlock}>

</Form>

Form API

Content:

• Form
• Field
• useForm
• useField
• FormContext

Form

Form is a wrapper component for you fields. Form provides block values and some handy meta data for form, all values are provided via useForm hook or FormContext

Props:

Name	Type	Optional?	Description
block	BlockFactory	Mandatory	Block which will use for handling form values
initialValues	Partial<TFormValues>	Optional	Initial values for form. Be carefull, if initialValues changes during life-time the component will re-render this new initialValues to form values
children	React.Node	Optional	Any react components for rendering form. All nested components can use FormContext, Field and useField utils
validate	(values: Object) => Object	Optional	Validation function, returns object with errors. Keys for errors should be the same as keys for invalid values in values parameter of that function
onSubmit	(values: Object) => void	Optional	Callback of form submit action, in that moment values passed all validations
onSubmitFailed	() => void	Optional	Callback for failed submit action
onSubmitSuccess	() => void	Optional	Callback for successful submit action (Invokes once after submit action call)

Field

Field is a wrapper component for inputs or any other component that should be able to change form values. All extra props to the component will pass to rendering component

Props:

Name	Type	Optional?	Description
name	string	Mandatory	The path to form value (field)
component	React.Component	Mandatory	Component that will be rendered for field
validate	`(fieldValue: any) => undefined	string`	Optional

useForm

React hook for gettings all the utilities for the form in which component wrapped. This hook does not apply any arguments, and returns the FormContext values.

// ...
const {
  values,
  util,
  submit,
  // ...etcs
} = useForm();
// ...

useField

React hook for field rendering functional component

Arguments:

Name	Type	Optional?	Description
name	string	Mandatory	The path to form value (field)
validate	`(fieldValue: any) => undefined	string`	Optional

FormContext

Context of current form

Values:

Name	Type	Description
values	TFormValues extends Object	Current values of form
util	TFormUtil extends Object	Current util values of form
errors	Object	Current errors of form
hasError	boolean	Shows if form has any error
formError	undefined | string	Message of the form error
submitted	boolean	Shows if the form where successfully submitted
change	(fieldName: string, value: any) => void	Change field value function
update	(RecursivePartial<TFormValues>) => void	Original update function from values block passed to the Form
submit	() => void	Submit action function
registerField	(name: string, field: FieldHandler) => number	Registering field function. Custom field component should be registered on mount
unregisterField	(name: string, fieldId: number) => boolean	Unregistering field function. Custom field component should be unregistered on unmount

Author

Ilya Melishnikov

LICENSE

MIT