Skip to content

Commit

Permalink
docs: reflect api changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ogonkov
ogonkov committed Jan 29, 2024
1 parent a939c55 commit d1c2957
Showing 1 changed file with 10 additions and 23 deletions.
33 changes: 10 additions & 23 deletions src/components/AvatarStack/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,17 @@ Stack of images with overlap over next image and optional control. This is usual
Component is not limit you to what components to render, basic usage is:

```tsx
<AvatarStack
items={[
{
login: 'login1',
},
{
login: 'login2',
},
{
login: 'login2',
},
]}
renderItem={(item) => <UserAvatar imgUrl={`https://i.pravatar.cc/150?u=${item.login}`} />}
renderMore={(items) => <AvatarStack.MoreButton count={items.length} />}
/>
<AvatarStack>
<UserAvatar imgUrl={`https://i.pravatar.cc/150?u=login1`} />
<UserAvatar imgUrl={`https://i.pravatar.cc/150?u=login2`} />
<UserAvatar imgUrl={`https://i.pravatar.cc/150?u=login3`} />
</AvatarStack>
```

## Properties

| Name | Description | Type | Default |
| :----------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------: | :-----: |
| displayCount | How much items should be visible | `number` | 2 |
| overlapSize | How much each item should overlap next one. `s` recommended for `UserAvatars` of sizes `xs`-`m`, `m` recomended for `l` size avatars and `l` overlap for `xl` avatars | `s`, `m`, `l` | `s` |
| className | Class name of root DOM node | `string` | |
| items | Array of items to render | `Object[]` | |
| renderItem | Render function for rendering `items`. First argument is item from `items` prop, and second argument is options with `itemClassName`, that should be applied for visible children, for correct alignment | `(item, options: {itemClassName: string}) => ReactNode` | |
| renderMore | Render function for rendering button, if there is a hidden items. Function receives this items as first argument | `(items) => reactNode` | |
| Name | Description | Type | Default |
| :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-----------: | :-----: |
| overlapSize | How much each item should overlap next one. `s` recommended for `UserAvatars` of sizes `xs`-`m`, `m` recomended for `l` size avatars and `l` overlap for `xl` avatars | `s`, `m`, `l` | `s` |
| className | Class name of root DOM node | `string` | |
| children | List of avatars, probably with some extra wrappers | `Object[]` | |

0 comments on commit d1c2957

Please sign in to comment.