https://github.com/draftbit/react-nav-current-route-name
🛣 🚴♀️ 🚧 Get the Current Route Name using React Navigation, Redux & Reselect
https://github.com/draftbit/react-nav-current-route-name
current-route react-navigation redux reselect route
Last synced: 9 months ago
JSON representation
🛣 🚴♀️ 🚧 Get the Current Route Name using React Navigation, Redux & Reselect
- Host: GitHub
- URL: https://github.com/draftbit/react-nav-current-route-name
- Owner: draftbit
- Created: 2017-12-05T21:25:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-15T20:30:58.000Z (about 8 years ago)
- Last Synced: 2025-02-25T12:11:24.475Z (about 1 year ago)
- Topics: current-route, react-navigation, redux, reselect, route
- Language: JavaScript
- Homepage:
- Size: 4.88 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🛣 🚴♀️ 🚧 Current Route Name
A memoized selector for redux + react-navigation that will expose the current route name for you!
## Installation
```
yarn add react-nav-current-route-name
```
```
npm install --save react-nav-current-route-name
```
## Usage
Two ways:
### 1 (as an HOC)
1. import `getCurrentRoute`
2. wrap it around your component
3. You'll have `currentRoute` available to you with the name of the current route
```es6
// if this is the only HOC you have:
import { withCurrentRouteName } from 'react-nav-current-route-name'
export default withCurrentRouteName(MyComponent)
// sometimes you'll have a few things using compose:
export default compose(
withCurrentRouteName,
withApollo,
withNavigation,
connectActionSheet
)(MyComponent)
// ...
componentDidUpdate(nextProps) {
const { currentRoute } = this.props
const { currentRoute: nextRoute } = nextProps
}
```
### 2 (using mapStateToProps)
1. import `getCurrentRouteName`
2. use it within your current `mapStateToProps` function
3. You'll have `currentRoute` available to you with the name of the current route
```es6
import { getCurrentRouteName } from 'react-nav-current-route-name'
export default connect(
mapStateToProps(state => {
return {
currentRoute: getCurrentRouteName(state.nav)
}
})
)
```