Skip to content

Commit 76aa2e7

Browse files
leandrowdleandrowd
committed
Updating npm package docs
1 parent 6637e47 commit 76aa2e7

2 files changed

Lines changed: 60 additions & 146 deletions

File tree

‎lib/README.md‎

Lines changed: 59 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,172 +1,86 @@
1-
# React Responsive Carousel (React 0.14)
1+
# React Responsive Carousel
22

3-
## Demos and docs:
4-
[http://leandrowd.github.io/react-responsive-carousel/](http://leandrowd.github.io/react-responsive-carousel/)
3+
## Demo
4+
<http://leandrowd.github.io/react-responsive-carousel/>
55

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

87
## Installing as a package
9-
`npm install react-responsive-carousel --save`
108

11-
## Getting started
12-
- Possible properties:
13-
- (Array) items
14-
- (Boolean) showControls
15-
- (Boolean) showStatus
16-
- (Function) onChange
17-
- Triggered when the carousel move
18-
- (Function) onSelectItem
19-
- Triggered when an item is selected
9+
`npm install react-responsive-carousel --save`
2010

21-
- Usage:
2211

23-
### Slider with controls
12+
## Contributing
2413

25-
```javascript
26-
var React = require('react');
27-
var ReactDOM = require('react-dom');
28-
var Carousel = require('react-responsive-carousel').Carousel;
14+
Please, feel free to contributing. You may file an issue or submit a pull request!
2915

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"/>
48-
```
4916

17+
## Development
5018

19+
To run it on your local environment just:
5120

52-
### Carousel
21+
- `git clone git@github.com:leandrowd/react-responsive-carousel.git`
22+
- `npm install`
23+
- `gulp`
24+
- Open your favourite browser on `localhost:8000`
5325

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"/>
77-
```
26+
To generate the npm package run `gulp package`. It will transpile the jsx to js and copy the css into the lib folder.
7827

79-
- Props:
80-
- (Array) items
81-
- (Boolean) showControls
82-
- (Boolean) showStatus
83-
- (Function) onChange
84-
- Triggered when the carousel move
85-
- (Function) onSelectItem
86-
- Triggered when an item is selected
8728

29+
## Getting started
8830

89-
### Image Gallery
31+
### Slider with controls
9032

9133
```javascript
9234
var React = require('react');
9335
var ReactDOM = require('react-dom');
9436
var Carousel = require('react-responsive-carousel').Carousel;
9537

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-
38+
var DemoCarousel = React.createClass({
39+
render() {
40+
return (
41+
<Carousel axis="horizontal|vertical" showThumbs={true|false} showArrows={true|false} onChange={onChange} onClickItem={onClickItem} onClickThumb={onClickThumb}>
42+
<div>
43+
<img src="assets/1.jpeg" />
44+
<p className="legend">Legend 1</p>
45+
</div>
46+
<div>
47+
<img src="assets/2.jpeg" />
48+
<p className="legend">Legend 2</p>
49+
</div>
50+
<div>
51+
<img src="assets/3.jpeg" />
52+
<p className="legend">Legend 3</p>
53+
</div>
54+
</Carousel>
55+
);
56+
}
57+
});
11058
ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
11159

112-
// Don't forget to include the css in your page
60+
// Don't forget to include the css in your page
11361
// <link rel="stylesheet" href="carousel.css"/>
11462
```
11563

116-
### How to build your own gallery
117-
118-
So simple, just add one carousel[type=slider] and another carousel sending the same parameters for both:
119-
120-
- Javascript / Jsx:
121-
122-
```javascript
123-
var React = require('react');
124-
var Carousel = require('./Carousel');
125-
126-
module.exports = React.createClass({
127-
128-
getDefaultProps () {
129-
return {
130-
selectedItem: 0
131-
}
132-
},
133-
134-
getInitialState () {
135-
return {
136-
selectedItem: this.props.selectedItem
137-
}
138-
},
139-
140-
selectItem (selectedItem) {
141-
this.setState({
142-
selectedItem: selectedItem
143-
});
144-
},
145-
146-
render () {
147-
return (
148-
<div className="image-gallery">
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>
155-
</div>
156-
);
157-
}
158-
});
159-
```
160-
161-
## Running locally
162-
To run it on your local environment just:
163-
164-
- `git clone git@github.com: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!
64+
## Properties
65+
66+
- (Boolean) showArrows (default: true, options: true, false)
67+
- (Boolean) showStatus (default: true, options: true, false)
68+
- (Boolean) showIndicators (default: true, options: true, false)
69+
- (Boolean) showThumbs (default: true, options: true, false)
70+
- (Number) selectedItem (default: 0, options: any number between the first and the last index)
71+
- (String) axis (default: "horizontal" | options: "horizontal", "vertical")
72+
- (Function) onChange (Triggered when the carousel move)
73+
- (Function) onClickItem (Triggered when an item is clicked)
74+
- (Function) onClickThumb (Triggered when a thumb is clicked)
75+
76+
77+
## Last update:
78+
- Adding free children;
79+
- Adding vertical carousel;
80+
- Adding free legend;
81+
- Fixing problem with has3d being called before body was available;
82+
- Updating to use ref callbacks;
83+
- Renaming callbacks;
84+
- Extracting swiper component;
85+
- Extracting thumbs;
86+
- Improving styles;

‎lib/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-responsive-carousel",
3-
"version": "3.0.0",
3+
"version": "3.0.1",
44
"description": "React Responsive Carousel",
55
"author": {
66
"name": "Leandro Augusto Lemos",

0 commit comments

Comments
 (0)