diff --git a/lib/README.md b/lib/README.md index dfa2486b..b51aa453 100644 --- a/lib/README.md +++ b/lib/README.md @@ -1,69 +1,15 @@ # React Responsive Carousel (React 0.14) -* Note: If you need support for IE8 or older versions of React, install version 0.1.6 - -## Demo - -http://leandrowd.github.io/react-responsive-carousel/ +## Demos and docs: +[http://leandrowd.github.io/react-responsive-carousel/](http://leandrowd.github.io/react-responsive-carousel/) +* Note: If you need support for IE8 or older versions of React, install version 0.1.6 ## Installing as a package - `npm install react-responsive-carousel --save` - -## Running locally - -To run it on your local environment just: - -- `git clone git@github.com:leandrowd/react-responsive-carousel.git` -- `npm install` -- `gulp` -- Open your favourite browser on `localhost:8000` - -To generate the npm package run `gulp package`. It will transpile the jsx to js and copy the css into the lib folder. - - -## Contributing - -Please, feel free to contributing. You may file an issue or submit a pull request! - - ## Getting started - -### Slider with controls - -- Javascript / Jsx: - -```javascript -/** @jsx React.DOM */ -var React = require('react'); -var Carousel = require('./components/Carousel'); - -var DemoSliderControls = React.createClass({ - render() { - return ( -
- -
- ); - } -}); - -React.render(, document.querySelector('.demo-slider-controls')); -``` - -- Css: - -```css - -``` - -- Props: +- Possible properties: - (Array) items - (Boolean) showControls - (Boolean) showStatus @@ -72,34 +18,62 @@ React.render(, document.querySelector('.demo-slider-contro - (Function) onSelectItem - Triggered when an item is selected +- Usage: -### Carousel - -- Javascript / Jsx: +### Slider with controls ```javascript -/** @jsx React.DOM */ var React = require('react'); -var Carousel = require('./components/Carousel'); - -var DemoCarousel = React.createClass({ - render() { - return ( -
- -
- ); - } -}); - -React.render(, document.querySelector('.demo-carousel')); +var ReactDOM = require('react-dom'); +var Carousel = require('react-responsive-carousel').Carousel; + +var DemoSliderControls = function(){ + return ( + + + + + + + + + + ); +}; + +ReactDOM.render(, document.querySelector('.demo-slider-controls')); + +// Don't forget to include the css in your page +// ``` -- Css: -```css - +### Carousel + +```javascript +var React = require('react'); +var ReactDOM = require('react-dom'); +var ImageGallery = require('react-responsive-carousel').ImageGallery; + +var DemoGallery = function() { + return ( + + + + + + + + + ); +}; + +ReactDOM.render(, document.querySelector('.demo-gallery')); + +// Don't forget to include the css in your page +// +// ``` - Props: @@ -112,39 +86,33 @@ React.render(, document.querySelector('.demo-carousel')); - Triggered when an item is selected - ### Image Gallery -- Javascript / Jsx: ```javascript -/** @jsx React.DOM */ var React = require('react'); -var ImageGallery = require('./components/ImageGallery'); - -var DemoGallery = React.createClass({ - render() { - return ( -
- -
- ); - } -}); - -React.render(, document.querySelector('.demo-gallery')); -``` - -- Css: -```css - - +var ReactDOM = require('react-dom'); +var Carousel = require('react-responsive-carousel').Carousel; + +var DemoCarousel = function() { + return ( + + + + + + + + + + ); +}; + +ReactDOM.render(, document.querySelector('.demo-carousel')); + +// Don't forget to include the css in your page +// ``` -- Props: - - images - - - ### How to build your own gallery So simple, just add one carousel[type=slider] and another carousel sending the same parameters for both: @@ -152,49 +120,53 @@ So simple, just add one carousel[type=slider] and another carousel sending the s - Javascript / Jsx: ```javascript -/** @jsx React.DOM */ -var React = require('react/addons'); +var React = require('react'); var Carousel = require('./Carousel'); module.exports = React.createClass({ - propsTypes: { - images: React.PropTypes.array.isRequired + getDefaultProps () { + return { + selectedItem: 0 + } }, getInitialState () { return { - currentImage: 0 + selectedItem: this.props.selectedItem } }, selectItem (selectedItem) { this.setState({ - currentImage: selectedItem + selectedItem: selectedItem }); }, render () { - var { images } = this.props; - var { current } = this.state; - var mainImage = (images && images[current] && images[current].url); - return (
- - - + + { this.props.children } + + + { this.props.children } +
); } }); ``` +## Running locally +To run it on your local environment just: + +- `git clone git@github.com:leandrowd/react-responsive-carousel.git` +- `npm install` +- `gulp` +- Open your favourite browser on `localhost:8000` + +To generate the npm package run `gulp package`. It will transpile the jsx to js and copy the css into the lib folder. + +## Contributing +Please, feel free to contributing. You may file an issue or submit a pull request! diff --git a/lib/package.json b/lib/package.json index b4c09686..2b49d4f6 100644 --- a/lib/package.json +++ b/lib/package.json @@ -1,6 +1,6 @@ { "name": "react-responsive-carousel", - "version": "0.1.6", + "version": "2.0.0", "description": "React Responsive Carousel", "author": { "name": "Leandro Augusto Lemos",