React + Typescript cheat sheet
- implement a carousel described here as a React component
<Carousel images={['url1', 'url2']} />
- add an ability to customize
itemWidth with default value of 130px
- add
frameSize - number of images displayed at the same time with the default of 3
- add
step (default 3) - number of images scrolled per click
- add
animationDuration (default 1000) - time in ms to show the new portion of images
- (*) add an
infinite prop (false by default) - to do the carousel cyclic
<Carousel
images={['url1', 'url2']}
step={3}
frameSize={3}
itemWidth={130}
animationDuration={1000}
infinite={false}
/>
- The title of the page should contain "Carousel"
- The page should contain inputs for:
itemWidthframeSizestepfnimationDuration
- Add data-cy attributes:
title inside h1 tagnext to the "Next" button
- Install Prettier Extention and use this VSCode settings to enable format on save.
- Implement a solution following the React task guideline.
- Use the React TypeScript cheat sheet.
- Open one more terminal and run tests with
npm test to ensure your solution is correct.
- Replace
<your_account> with your Github username in the DEMO LINK and add it to the PR description.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent