Skip to content

Commit

Permalink
Merge pull request #290 from 10up/doc/261
Browse files Browse the repository at this point in the history
doc/261: clarify usage of `<Repeater />` component
  • Loading branch information
fabiankaegy authored Jan 29, 2024
2 parents 05c8a09 + a1b93ac commit 8be1c91
Showing 1 changed file with 20 additions and 2 deletions.
22 changes: 20 additions & 2 deletions components/repeater/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,33 @@ A Repeater component that allows you to add repeater fields.

The type definition of the attribute needs to be set as an array and the name of the attribute should be passed to the `attribute` prop of the `Repeater` component.

For example, if a repeater item unit is a group field containing a text field and a checkbox field, the attribute would be defined in `block.json` as:

```json
"attributes": {
"repeaterFieldData": {
"type": "array",
"default": [
{
"text": "",
"checked": false
}
],
}
}
```

**Note:** You should not provide an `id` to the repeater item unit. The Repeater component will automatically generate an `id` for each item.

```js
import { Repeater } from '@10up/block-components';

export function BlockEdit(props) {
const { attributes } = props;
const { items } = attributes;
const { repeaterFieldData } = attributes;

return (
<Repeater attribute="items">
<Repeater attribute="repeaterFieldData">
{( item, index, setItem, removeItem ) => (
<>
<TextControl key={index} value={item} onChange={(value) => setItem(value)} />
Expand Down

0 comments on commit 8be1c91

Please sign in to comment.