https://github.com/gabrielbs/react-component-swiper

A carousel of React components
https://github.com/gabrielbs/react-component-swiper

react react-components reactjs renderprops

Last synced: 10 months ago
JSON representation

A carousel of React components

• Host: GitHub
• URL: https://github.com/gabrielbs/react-component-swiper
• Owner: gabrielbs
• Created: 2018-05-16T01:59:56.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-01-11T12:59:17.000Z (about 7 years ago)
• Last Synced: 2024-03-25T05:43:22.127Z (almost 2 years ago)
• Topics: react, react-components, reactjs, renderprops
• Language: JavaScript
• Homepage:
• Size: 284 KB
• Stars: 4
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![Build Status](https://travis-ci.org/gabrielbs/react-component-swiper.svg?branch=master)](https://travis-ci.org/gabrielbs/react-component-swiper)

# React Component Swiper

React Component Swiper was full build with render props for full control of your logic and maximum re-use  as possible

### Install

```

npm install --save react-component-swiper

```

### Demo

https://gabrielbs.github.io/react-component-swiper/example/

### Example

```javascript

import ComponentSwiper from 'react-component-swiper'

,

    ,

    
3

   ]}

   arrowRight={(props) => (

      props.goNext()}>goNext

   )}

   arrowLeft={(props) => (

      props.goPrev()}>goPrev

   )}

   conditionNext={true}

   conditionPrev={true}

/>

```

### Running example locally

```

npm run dev

```

Then access your localhost on port 9000 http://localhost:9000


### Props

 - #### data: React.PropTypes.array

	An array of components

- #### arrowRight: React.PropTypes.func

	A function for render an markup (a button for example) tag with access of goNext() method

- #### arrowLeft: React.PropTypes.func

	A function for render an markup tag (a button for example) with access of goPrev() method

- #### conditionNext: React.PropTypes.bool

	Conditional for go to next slide

- #### conditionPrev: React.PropTypes.bool

	Conditional for go to prev slide

## License

[MIT](http://opensource.org/licenses/MIT) ©