react-swipeable-routes
v0.8.0
Utility for integrating react-swipeable-views with react-router.
0/weekUpdated 3 years agoMITUnpacked: 29.2 KB
Published by Pablo Sanfilippo
npm install react-swipeable-routesreact-swipeable-routes
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]
Utility for integrating react-swipeable-views with react-router.
[build-badge]: https://img.shields.io/travis/sanfilippopablo/react-swipeable-routes/master.png?style=flat-square
[build]: https://travis-ci.org/sanfilippopablo/react-swipeable-routes
[npm-badge]: https://img.shields.io/npm/v/react-swipeable-routes.png?style=flat-square
[npm]: https://www.npmjs.com/package/react-swipeable-routes
[coveralls-badge]: https://img.shields.io/coveralls/sanfilippopablo/react-swipeable-routes/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/sanfilippopablo/react-swipeable-routes
Example
Notice how the url changes when swipping.
This example is available on /example.
Usage
``es6
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import SwipeableRoutes from "react-swipeable-routes";
const RedView = () => (
Red
);
const BlueView = () => (
Blue
);
const GreenView = () => (
Green
);
const YellowView = () => (
Yellow
);
class App extends Component {
render() {
return (
React Swipeable Routes example
Red |Blue |
Green |Yellow
);
}
}
export default App;
`
Any additional props will be passed down to SwipeableViews:
`es6`
$3
You can add a replace prop to SwipeableRoutes and it will replace location instead of pushing it when swiping.
`es6`
$3
`es6
class App extends Component {
scrollToTop = index => {
Array.from(this.el.containerNode.children).forEach((child, i) => {
if (index !== i) {
child.scrollTo(0, 0);
}
});
};
render() {
return (
onChangeIndex={this.scrollToTop}
innerRef={el => (this.el = el)}
containerStyle={{ height: 200 }}
>
);
}
}
`
$3
You can include routes with parameters in the path. However, you can't swipe to them directly, you have to enter through a link or a url change. If you want to be able to swipe to them, you can include a defaultParams props specifying the default parameters for when swipping to them.
`es6
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import SwipeableRoutes from "react-swipeable-routes";
const RedView = () => (
Red
);
const BlueView = () => (
Blue
);
const GreenView = () => (
Green
);
const YellowView = () => (
Yellow
);
const OtherColorView = ({ match }) => (
{match.params.color}
);
class App extends Component {
render() {
return (
React Swipeable Routes example
Red |Blue |
Green |Yellow |
Pale Violet Red |
Saddle Brown
component={OtherColorView}
defaultParams={{ color: "grey" }}
/>
);
}
}
export default App;
`
Unlike react-router, with react-swipeable-routes all routes have to be rendered at all times. Because of that, unlike react-router, in which your component gets a match object only if there was a match, here your rendered component will always receive a match prop with same structure as the match prop in react-router except for one difference: it includes a type object indicating what type of match it is:
- none: The view was never rendered and its parameters are the specified defaults.outOfView
- : The view has different parameters than default, but it's currently out of the screen.full`: The view is currently on screen an it has different parameters than default.
-