Nano Particle Matrix

    react-siema

    1.0.1 • Public • Published

    ReactSiema - Lightweight and simple carousel for React

    ReactSiema is a lightweight carousel plugin for React. It's a wrapper based on decent library Siema.

    Demo

    Download on npm

    Setup

    npm install react-siema --save
    
    import ReactSiema from 'react-siema'
    
    const Slide = (props) => <img {...props} alt="slide" />
    
    const App = () => <ReactSiema>
        <Slide src="#" />
        <Slide src="#" />
        <Slide src="#" />
    </ReactSiema>
    

    If you want to run a demo:

    • Clone the repo
    • run npm install
    • run npm start, which will setup a development server with sample gallery

    Options

    Component comes with some default settings, that can be adjusted via props.

    resizeDebounce: 250
    duration: 200
    easing: 'ease-out'
    perPage: 1
    startIndex: 0
    draggable: true
    threshold: 20
    loop: false
    

    Example of passing custom options:

    const Slide = (props) => <img {...props} alt="slide" />
    
    const options = {
        duration: 500,
        loop: true
    }
    
    const App = () => <ReactSiema {...options}>
        <Slide src="#" />
        <Slide src="#" />
        <Slide src="#" />
    </ReactSiema>
    

    API

    Most of the API comes from Siema library mentioned above.

    • next() - go to next slide
    • prev() - go to previous slide
    • goTo(index) - go to a specific slide
    • currentSlide - index of the current active slide (read only)

    Example of API usage

    API is accessible via refs.

    const Slide = (props) => <img {...props} alt="slide" />
    
    const App = () => {
        let slider
        
        return (
            <div>
                <ReactSiema ref={siema => slider = siema}>
                    <Slide src="#" />
                    <Slide src="#" />
                    <Slide src="#" />
                </ReactSiema>
                <button onClick={() => slider.prev()}>prev</button>
                <button onClick={() => slider.next()}>next</button>
            </div>
        )
    }
    

    Install

    npm i react-siema

    DownloadsWeekly Downloads

    116

    Version

    1.0.1

    License

    none

    Last publish

    Collaborators

    • mantask