https://github.com/suhdev/react-carousel
A responsive carousel component for ReactJS application written in TypeScript.
https://github.com/suhdev/react-carousel
Last synced: 9 months ago
JSON representation
A responsive carousel component for ReactJS application written in TypeScript.
- Host: GitHub
- URL: https://github.com/suhdev/react-carousel
- Owner: suhdev
- Created: 2016-06-17T15:26:24.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-06-25T04:20:56.000Z (about 10 years ago)
- Last Synced: 2025-08-09T15:54:04.502Z (11 months ago)
- Language: JavaScript
- Size: 262 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#react-carousel
A ReactJS Carousel component written in TypeScript.
##Available Properties
1. `items`
The items to show on the carousel. Each item is an object that must include the following two properties: `key` and `label`.
2. `selIndex`
The item of the currently selected item.
3. `prevButton`
A `React.ReactElement` to be used as the previous button.
4. `nextButton`
A `React.ReactElement` to be used as the next button.
5. `onItemClick`
A function to be called when a carousel item is clicked.
6. `minItemWidth`
The minimum width of the carousel items.
7. `width`
The width of the carousel component excluding the next/button width.
8. `buttonWidth`
An optional parameter used to set the width of the next/prev buttons. Defaults to 42.
9. `gutter`
An optional parameter used to set the gutter between carousel items, defaults to 0. Note: this parameter will not actually set the gutter between items, please use CSS to do so.
It is mainly to account for the gutter when calculating widths of the carousel items.
10. `className`
An optional parameter used to set an extra class for the carousel component root element. Defaults to ""
11. `itemRenderer`
An optional callback function to override the carousel's item rendering. The callback will receive an item definition `{label:string,key:string}`, the item index, and the itemOnClick function,
the function should return `React.ReactElement` that represent that specific item.
##Styling
1. Component CSS selector `.react-carousel`
2. Carousel item CSS selector `.rc-item`
3. Carousel buttons CSS selector `.rc-btn`, prev -> `.rc-btn.prev`, next -> `.rc-btn.next`
4. Carousel viewport CSS selector `.rc-viewport`
5. Carousel viewport wrapper CSS selector `.rc-viewport-wrapper`
##Usage
###HTML file
```html
...
....
....
```
###TypeScript/JavaScript (ES6)
```typescript
//main.ts | main.js
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {ReactCarousel} from 'react-carousel';
let items = [0,1,2,3,4].map((e)=>{
return {
label:e+'',
key:e+''
};
});
let comp = ReactDOM.render((Prev)}
nextButton={(Next)}
onItemClick={(idx:number,key:string)=>{console.log(idx);console.log(key);}}
minItemWidth={80}
gutter={4}
buttonWidth={42}
width={400} />),document.getElementById('ComponentContainer'));
```
2. JavaScript (ES6) with CommonJS modules
```javascript
//main.js
var React = require('react');
var ReactDOM = require('react-dom');
var ReactCarousel = require('react-carousel');
var items = [0,1,2,3,4].map((e)=>{
return {
label:e+'',
key:e+''
};
});
var comp = ReactDOM.render((Prev)}
nextButton={(Next)}
onItemClick={(idx:number,key:string)=>{console.log(idx);console.log(key);}}
minItemWidth={80}
gutter={4}
buttonWidth={42}
width={400} />),document.getElementById('ComponentContainer'));
```
##Usage with JSPM
```
import {ReactCarousel} from 'sh-react-carousel';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
ReactDOM.render((Prev)}
nextButton={(Next)}
onItemClick={(idx:number,key:string)=>{console.log(idx);console.log(key);}}
minItemWidth={80}
gutter={4}
buttonWidth={42}
width={400} />),document.getElementById('ComponentContainer'));
```