Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/axyz/react-zlide

Lightweight and stateless slider component for React.js
https://github.com/axyz/react-zlide

Last synced: 3 days ago
JSON representation

Lightweight and stateless slider component for React.js

Awesome Lists containing this project

README

        

react-zlide
===========

Lightweight and stateless slider component for React.js

It uses only css3 for sizing and animations.

Usage
-----
Add `react-zlide` as a dependency

`$ npm install --save react-zlide`

then simply use the provided component

Note that the component is stateless, so updating the `currentSlide` should
be handled in the model of your app (e.g. using redux or similar flux
implementations)

The component is also unstyled (except for the slide layout and transform).

For the `Zlide` component to work correctly, please be sure to have support for
`calc`, `flex` and `transform` or eventually be sure to use polyfills.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';

import Zlide from 'react-zlide';

ReactDOM.render(


console.log('slide click ' + index)}>

... // slides (e.g. tags)

// you may probably want to bind an action that updates the currentSlide
// on your store to the `onClick` event

console.log('prev click')}>

prev

console.log('next click')}>

next

,
document.getElementById('zlide-example')
);

```

Development
-----------
Clone the repository then

`$ npm install`

use

`$ make dist`

to build

and

`make dev`

to start a dev server on `localhost:8080`

Warnings
--------
This component should not not be considered ready for production (until it will reach 1.0.0),
however testing and contributions are really welcome.