Skip to content

Commit c9f84c2

Browse files
committed
Add new useCarousel doc
1 parent 470ff09 commit c9f84c2

File tree

1 file changed

+50
-0
lines changed

1 file changed

+50
-0
lines changed
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Required } from '@site/src/components'
2+
3+
# useCarousel
4+
5+
`useCarousel` is a hook that provides `a11yProps` for creating carousels from FlatLists or ScrollViews.
6+
7+
:::info
8+
9+
`a11yProps` here is an object that contains all the necessary accessibility props to make an accessible carousel, those being the role, actions and the onAction handler. See [Carousel guidelines](/guidelines/carousel) for more information.
10+
11+
:::
12+
13+
## Usage
14+
15+
```tsx {2-4,8-10}
16+
import { useCarousel } from '@react-native-ama/extras';
17+
18+
const ExampleCarousel = props => {
19+
const ref = React.useRef<FlatList>(null);
20+
const a11yProps = useCarousel({
21+
data: props.data,
22+
flatListRef: ref,
23+
});
24+
25+
return <FlatList ref={ref} {...props} {...a11yProps} />;
26+
};
27+
```
28+
29+
## Props
30+
31+
### <Required /> `data`
32+
33+
The data passed to the Scrollable component, used to calculate the number of items in the carousel.
34+
35+
| Type | Default |
36+
| ------------------------------------- | --------- |
37+
| ArrayLike\<any\> \| null \| undefined | undefined |
38+
39+
### <Required /> `flatListRef`
40+
41+
The ref passed to the FlatList or ScrollView, used to scroll to index's when accessibility actions are performed.
42+
43+
| Type | Default |
44+
| ------------------------------------ | --------- |
45+
| React.Ref\<FlatList\<any\> \| null\> | undefined |
46+
47+
## Related
48+
49+
- [Carousel Guidelines](/guidelines/carousel)
50+
- [CarouseWrapper](/extras/components/carouse-wrapper)

0 commit comments

Comments
 (0)