Methods
# inner ClusterField(props) → {React.ReactElement}
ClusterField component will render a field that contains a list of subfields
Parameters:
| Name | Type | Description |
|---|---|---|
props |
object
|
props object |
control |
object
|
react-hook-form control object |
field |
object
|
field object |
props |
object
|
props object |
options |
object
|
options object |
renderAddButton |
function
|
render function for the add button |
renderRemoveButton |
function
|
render function for the remove button |
React.ReactElement
# inner ClusterRow(props) → {React.ReactElement}
ClusterRow component will render a row of fields
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
props |
object
|
props object | |
id |
string
|
id of the cluster | |
clusterName |
string
|
name of the cluster | |
index |
number
|
index of the cluster | |
row |
object
|
row object | |
row.fields |
object
|
array of fields | |
row.solitary |
boolean
|
solitary boolean | |
row.size |
number
|
<optional> |
size number |
row.maxColumns |
number
|
<optional> |
maxColumns number |
control |
object
|
control object | |
options |
object
|
<optional> |
options object |
layout |
object
|
<optional> |
layout object |
otherProps |
object
|
<optional> |
otherProps object |
- React element
React.ReactElement
# inner InlineWrapper(props) → {React.ReactElement}
A wrapper for the ClusterRow component that renders the rows inline
Parameters:
| Name | Type | Description |
|---|---|---|
props |
ClusterRowWrapperProps
|
- The rendered component
React.ReactElement
# inner renderDefaultAddButton(props) → {React.ReactElement}
A component to render a cluster of fields
Parameters:
| Name | Type | Description |
|---|---|---|
props |
RenderAddButtonProps
|
props object |
- React element of the button and divider
React.ReactElement
# inner renderDefaultRemoveButton(props) → {React.ReactElement}
The default remove button for the ClusterField component
Parameters:
| Name | Type | Description |
|---|---|---|
props |
RenderRemoveButtonProps
|
|
inlineAllowed |
boolean
|
whether the button can be rendered inline |
inline |
boolean
|
whether the button is rendered inline |
onClick |
function
|
onClick function for the button |
remove |
function
|
remove function from useFieldArray |
trigger |
function
|
trigger function from useFormContext |
index |
number
|
index of the field |
- React element of the button
React.ReactElement
# inner TrashCanIcon() → {React.ReactElement}
Trash can icon via Heroicons
- React element
React.ReactElement
# inner Wrapper() → {React.ReactElement}
A wrapper for the ClusterRow and remove button
Parameters:
| Type | Description |
|---|---|
ClusterRowWrapperProps
|
- The rendered component
React.ReactElement
Type Definitions
Object
# ClusterRowWrapperProps
Properties:
| Name | Type | Description |
|---|---|---|
clusterName |
string
|
The name of the cluster (i.e. the name of the field) |
clusterId |
string
|
The unique id of the cluster created by react-hook-form |
rows |
Array
|
An array of row objects |
rowProps |
Object
|
The props to pass to the ClusterRow component |
removeButton |
React.ReactElement
|
The remove button to render |
object
# RenderAddButtonProps
Properties:
| Name | Type | Description |
|---|---|---|
layout |
object
|
layout object |
addLabel |
string
|
label for the add button |
append |
function
|
append function from useFieldArray |
trigger |
function
|
trigger function from useFormContext |
initValues |
object
|
initial values for the new batch of fields |
object
# RenderRemoveButtonProps
Properties:
| Name | Type | Description |
|---|---|---|
layout |
object
|
layout object |
removeLabel |
string
|
label for the remove button |
remove |
function
|
remove function from useFieldArray |
trigger |
function
|
trigger function from useFormContext |
index |
number
|
index of the field |
onClick |
function
|
onClick function for the button |