Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/axyz/react-zlide
- Owner: axyz
- License: mit
- Created: 2016-01-27T15:46:44.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-08-15T16:05:20.000Z (over 8 years ago)
- Last Synced: 2024-09-25T23:56:40.256Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 107 KB
- Stars: 8
- Watchers: 12
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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.