Skip to content

Commit 81232ee

Browse files
leandrowdleandrowd
committed
Releasing 2.0 for NPM
1 parent 2377fde commit 81232ee

File tree

2 files changed

+99
-127
lines changed

2 files changed

+99
-127
lines changed

‎lib/README.md

+98-126
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,15 @@
11
# React Responsive Carousel (React 0.14)
22

3-
* Note: If you need support for IE8 or older versions of React, install version 0.1.6
4-
5-
## Demo
6-
7-
http://leandrowd.github.io/react-responsive-carousel/
3+
## Demos and docs:
4+
[http://leandrowd.github.io/react-responsive-carousel/](http://leandrowd.github.io/react-responsive-carousel/)
85

6+
* Note: If you need support for IE8 or older versions of React, install version 0.1.6
97

108
## Installing as a package
11-
129
`npm install react-responsive-carousel --save`
1310

14-
15-
## Running locally
16-
17-
To run it on your local environment just:
18-
19-
- `git clone [email protected]:leandrowd/react-responsive-carousel.git`
20-
- `npm install`
21-
- `gulp`
22-
- Open your favourite browser on `localhost:8000`
23-
24-
To generate the npm package run `gulp package`. It will transpile the jsx to js and copy the css into the lib folder.
25-
26-
27-
## Contributing
28-
29-
Please, feel free to contributing. You may file an issue or submit a pull request!
30-
31-
3211
## Getting started
33-
34-
### Slider with controls
35-
36-
- Javascript / Jsx:
37-
38-
```javascript
39-
/** @jsx React.DOM */
40-
var React = require('react');
41-
var Carousel = require('./components/Carousel');
42-
43-
var DemoSliderControls = React.createClass({
44-
render() {
45-
return (
46-
<div className="demo-slider">
47-
<Carousel
48-
type="slider"
49-
items={ sliderImages }
50-
showControls={true}
51-
showStatus={true} />
52-
</div>
53-
);
54-
}
55-
});
56-
57-
React.render(<DemoSliderControls />, document.querySelector('.demo-slider-controls'));
58-
```
59-
60-
- Css:
61-
62-
```css
63-
<link rel="stylesheet" href="carousel.css"/>
64-
```
65-
66-
- Props:
12+
- Possible properties:
6713
- (Array) items
6814
- (Boolean) showControls
6915
- (Boolean) showStatus
@@ -72,34 +18,62 @@ React.render(<DemoSliderControls />, document.querySelector('.demo-slider-contro
7218
- (Function) onSelectItem
7319
- Triggered when an item is selected
7420

21+
- Usage:
7522

76-
### Carousel
77-
78-
- Javascript / Jsx:
23+
### Slider with controls
7924

8025
```javascript
81-
/** @jsx React.DOM */
8226
var React = require('react');
83-
var Carousel = require('./components/Carousel');
84-
85-
var DemoCarousel = React.createClass({
86-
render() {
87-
return (
88-
<div className="demo-carousel">
89-
<Carousel items={ carouselImages } />
90-
</div>
91-
);
92-
}
93-
});
94-
95-
React.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
27+
var ReactDOM = require('react-dom');
28+
var Carousel = require('react-responsive-carousel').Carousel;
29+
30+
var DemoSliderControls = function(){
31+
return (
32+
<Carousel type="slider" showControls={true} showStatus={true}>
33+
<img src="assets/1.jpeg" />
34+
<img src="assets/2.jpeg" />
35+
<img src="assets/3.jpeg" />
36+
<img src="assets/4.jpeg" />
37+
<img src="assets/5.jpeg" />
38+
<img src="assets/6.jpeg" />
39+
<img src="assets/7.jpeg" />
40+
</Carousel>
41+
);
42+
};
43+
44+
ReactDOM.render(<DemoSliderControls />, document.querySelector('.demo-slider-controls'));
45+
46+
// Don't forget to include the css in your page
47+
// <link rel="stylesheet" href="carousel.css"/>
9648
```
9749

9850

99-
- Css:
10051

101-
```css
102-
<link rel="stylesheet" href="carousel.css"/>
52+
### Carousel
53+
54+
```javascript
55+
var React = require('react');
56+
var ReactDOM = require('react-dom');
57+
var ImageGallery = require('react-responsive-carousel').ImageGallery;
58+
59+
var DemoGallery = function() {
60+
return (
61+
<ImageGallery showControls={true} showStatus={true}>
62+
<img src="assets/1.jpeg" />
63+
<img src="assets/2.jpeg" />
64+
<img src="assets/3.jpeg" />
65+
<img src="assets/4.jpeg" />
66+
<img src="assets/5.jpeg" />
67+
<img src="assets/6.jpeg" />
68+
</ImageGallery>
69+
);
70+
};
71+
72+
ReactDOM.render(<DemoGallery />, document.querySelector('.demo-gallery'));
73+
74+
// Don't forget to include the css in your page
75+
// <link rel="stylesheet" href="imageGallery.css"/>
76+
// <link rel="stylesheet" href="carousel.css"/>
10377
```
10478

10579
- Props:
@@ -112,89 +86,87 @@ React.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
11286
- Triggered when an item is selected
11387

11488

115-
11689
### Image Gallery
11790

118-
- Javascript / Jsx:
11991
```javascript
120-
/** @jsx React.DOM */
12192
var React = require('react');
122-
var ImageGallery = require('./components/ImageGallery');
123-
124-
var DemoGallery = React.createClass({
125-
render() {
126-
return (
127-
<div className="demo-image-gallery">
128-
<ImageGallery images={ galleryImages } />
129-
</div>
130-
);
131-
}
132-
});
133-
134-
React.render(<DemoGallery />, document.querySelector('.demo-gallery'));
135-
```
136-
137-
- Css:
138-
```css
139-
<link rel="stylesheet" href="imageGallery.css"/>
140-
<link rel="stylesheet" href="carousel.css"/>
93+
var ReactDOM = require('react-dom');
94+
var Carousel = require('react-responsive-carousel').Carousel;
95+
96+
var DemoCarousel = function() {
97+
return (
98+
<Carousel>
99+
<img src="assets/1.jpeg" />
100+
<img src="assets/2.jpeg" />
101+
<img src="assets/3.jpeg" />
102+
<img src="assets/4.jpeg" />
103+
<img src="assets/5.jpeg" />
104+
<img src="assets/6.jpeg" />
105+
<img src="assets/7.jpeg" />
106+
</Carousel>
107+
);
108+
};
109+
110+
ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
111+
112+
// Don't forget to include the css in your page
113+
// <link rel="stylesheet" href="carousel.css"/>
141114
```
142115

143-
- Props:
144-
- images
145-
146-
147-
148116
### How to build your own gallery
149117

150118
So simple, just add one carousel[type=slider] and another carousel sending the same parameters for both:
151119

152120
- Javascript / Jsx:
153121

154122
```javascript
155-
/** @jsx React.DOM */
156-
var React = require('react/addons');
123+
var React = require('react');
157124
var Carousel = require('./Carousel');
158125

159126
module.exports = React.createClass({
160127

161-
propsTypes: {
162-
images: React.PropTypes.array.isRequired
128+
getDefaultProps () {
129+
return {
130+
selectedItem: 0
131+
}
163132
},
164133

165134
getInitialState () {
166135
return {
167-
currentImage: 0
136+
selectedItem: this.props.selectedItem
168137
}
169138
},
170139

171140
selectItem (selectedItem) {
172141
this.setState({
173-
currentImage: selectedItem
142+
selectedItem: selectedItem
174143
});
175144
},
176145

177146
render () {
178-
var { images } = this.props;
179-
var { current } = this.state;
180-
var mainImage = (images && images[current] && images[current].url);
181-
182147
return (
183148
<div className="image-gallery">
184-
<Carousel
185-
type="slider"
186-
items={ images }
187-
selectedItem={this.state.currentImage}
188-
onChange={this.selectItem}
189-
onSelectItem={ this.selectItem } />
190-
191-
<Carousel
192-
items={ images }
193-
selectedItem={this.state.currentImage}
194-
onSelectItem={ this.selectItem } />
149+
<Carousel type="slider" selectedItem={this.state.selectedItem} showControls={this.props.showControls} showStatus={this.props.showStatus} onChange={this.selectItem} onSelectItem={ this.selectItem }>
150+
{ this.props.children }
151+
</Carousel>
152+
<Carousel selectedItem={this.state.selectedItem} onSelectItem={ this.selectItem }>
153+
{ this.props.children }
154+
</Carousel>
195155
</div>
196156
);
197157
}
198158
});
199159
```
200160

161+
## Running locally
162+
To run it on your local environment just:
163+
164+
- `git clone [email protected]:leandrowd/react-responsive-carousel.git`
165+
- `npm install`
166+
- `gulp`
167+
- Open your favourite browser on `localhost:8000`
168+
169+
To generate the npm package run `gulp package`. It will transpile the jsx to js and copy the css into the lib folder.
170+
171+
## Contributing
172+
Please, feel free to contributing. You may file an issue or submit a pull request!

‎lib/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-responsive-carousel",
3-
"version": "0.1.6",
3+
"version": "2.0.0",
44
"description": "React Responsive Carousel",
55
"author": {
66
"name": "Leandro Augusto Lemos",

0 commit comments

Comments
 (0)