andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Carousel

Browse Source
This commit is contained in:
Isabelle Viktoria Maciohsek
2020-09-06 14:24:23 +03:00
parent 95746a843b
commit c75b370028
1 changed files with 3 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
snippets/Carousel.md
View File

@ -12,7 +12,7 @@ Renders a carousel component.
- Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles. - Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.
```jsx ```jsx
function Carousel(props) { const Carousel = ({ carouselItems, ...rest }) => {
const [active, setActive] = React.useState(0); const [active, setActive] = React.useState(0);
let scrollInterval = null; let scrollInterval = null;
const style = { const style = {
@ -29,12 +29,11 @@ function Carousel(props) {
}; };
React.useEffect(() => { React.useEffect(() => {
scrollInterval = setTimeout(() => { scrollInterval = setTimeout(() => {
const { carouselItems } = props;
setActive((active + 1) % carouselItems.length); setActive((active + 1) % carouselItems.length);
}, 2000); }, 2000);
return () => clearTimeout(scrollInterval); return () => clearTimeout(scrollInterval);
}); });
const { carouselItems, ...rest } = props;
return ( return (
<div style={style.carousel}> <div style={style.carousel}>
{carouselItems.map((item, index) => { {carouselItems.map((item, index) => {
@ -49,7 +48,7 @@ function Carousel(props) {
})} })}
</div> </div>
); );
} };
``` ```
```jsx ```jsx