https://github.com/enzoferey/react-swipe-navigation

A simple navigation system with swipe interaction
https://github.com/enzoferey/react-swipe-navigation

Last synced: about 2 months ago
JSON representation

A simple navigation system with swipe interaction

• Host: GitHub
• URL: https://github.com/enzoferey/react-swipe-navigation
• Owner: enzoferey
• Created: 2016-08-20T14:54:17.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-05-15T10:01:18.000Z (over 6 years ago)
• Last Synced: 2024-11-17T15:21:10.639Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 5.15 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-swipe-navigation

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

## Demo

**[Check out the demo]** (best fit on mobile)

![gif](https://enzoferey.github.io/react-swipe-navigation/demo-gif.gif)

## Install

```

npm install react-swipe-navigation

```

## Usage

```jsx

import React from 'react'

import ReactDOM from 'react-dom';

import ReactSwipeNavigation from 'react-swipe-navigation';

const Navigation = () => (

    

        
Home content

        
Blog content

        
About content

        
Contact content

    

);


ReactDOM.render(

    , 

    document.getElementById('app')

);

```

## Props

  - `menu: Array of String` - any length, but more than 6 will not fit well on mobile

  - `minX: Number` - minimum X axis pixels difference for valid swipe

  - `maxY: Number` - maximum Y axis pixels difference for valid swipe

  - `speed: Number` - speed of transitions (default is Swipe.js's default, 300ms)

  

([See defaults])

## Credits

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

**MIT Licensed**

[Dmitri Voronianski]: 

[react-swipe]: 

[Swipe.js]: 

[Check out the demo]: 

[See defaults]: