react-swipe-navigation

A simple navigation system based on panels with swipe interaction for both mobile and PC made with React

Credits

Used a slightly modified version of Dmitri Voronianski's react-swipe which also uses Swipe.js itself.

Demo

Check out the demo (best fit on mobile)

Install

npm install react-swipe-navigation

Usage

Example

import React from 'react'
import ReactDOM from 'react-dom';
import ReactSwipeNavigation from 'react-swipe-navigation';
 
class YourClass extends React.Component {
    render() {
        return (
            <ReactSwipeNavigation menu={ ['Home', 'Blog', 'About', 'Contact'] } >
                <div>Home content</div>
                <div>Blog content</div>
                <div>About content</div>
                <div>Contact content</div>
            </ReactSwipeNavigation>
        );
    }
}
 
ReactDOM.render(
    <YourClass />, 
    document.getElementById('app')
);

Props

• menu: ?Array - any length, but more than 6 will not fit well on mobile
• minX: ?Number - minimum X axis difference for valid swipe
• maxY: ?Number - maximum Y axis difference for valid swipe
• speed: ?Number - speed of transitions (default is Swipe.js's default, 300ms)

(See defaults)

MIT Licensed