#react-carousel
A ReactJS Carousel component written in TypeScript.
##Available Properties
itemsThe items to show on the carousel. Each item is an object that must include the following two properties:keyandlabel.selIndexThe item of the currently selected item.prevButtonAReact.ReactElementto be used as the previous button.nextButtonAReact.ReactElementto be used as the next button.onItemClickA function to be called when a carousel item is clicked.minItemWidthThe minimum width of the carousel items.widthThe width of the carousel component excluding the next/button width.buttonWidthAn optional parameter used to set the width of the next/prev buttons. Defaults to 42.gutterAn 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.classNameAn optional parameter used to set an extra class for the carousel component root element. Defaults to ""itemRendererAn 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 returnReact.ReactElement<any>that represent that specific item.
##Styling
- Component CSS selector
.react-carousel - Carousel item CSS selector
.rc-item - Carousel buttons CSS selector
.rc-btn, prev ->.rc-btn.prev, next ->.rc-btn.next - Carousel viewport CSS selector
.rc-viewport - Carousel viewport wrapper CSS selector
.rc-viewport-wrapper
##Usage
###HTML file
<!DOCTYPE html>
<html>
<head>...</head>
<body>
....
<div id="ComponentContainer"></div>
....
</body>
</html>###TypeScript/JavaScript (ES6)
//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((<ReactCarousel
items={items}
selIndex={0}
prevButton={(<span>Prev</span>)}
nextButton={(<span>Next</span>)}
onItemClick={(idx:number,key:string)=>{console.log(idx);console.log(key);}}
minItemWidth={80}
gutter={4}
buttonWidth={42}
width={400} />),document.getElementById('ComponentContainer'));- JavaScript (ES6) with CommonJS modules
//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((<ReactCarousel
items={items}
selIndex={0}
prevButton={(<span>Prev</span>)}
nextButton={(<span>Next</span>)}
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((<ReactCarousel
items={items}
selIndex={0}
prevButton={(<span>Prev</span>)}
nextButton={(<span>Next</span>)}
onItemClick={(idx:number,key:string)=>{console.log(idx);console.log(key);}}
minItemWidth={80}
gutter={4}
buttonWidth={42}
width={400} />),document.getElementById('ComponentContainer'));
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent