https://github.com/damianomagrini/react-stack-navigator
A native-like stack navigator for React DOM, inspired by Flutter's Navigator v1
https://github.com/damianomagrini/react-stack-navigator
Last synced: about 2 months ago
JSON representation
A native-like stack navigator for React DOM, inspired by Flutter's Navigator v1
- Host: GitHub
- URL: https://github.com/damianomagrini/react-stack-navigator
- Owner: DamianoMagrini
- Created: 2021-08-06T05:05:46.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-01-11T13:07:56.000Z (over 3 years ago)
- Last Synced: 2025-03-18T13:22:50.528Z (3 months ago)
- Language: TypeScript
- Size: 39.1 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# React Stack Navigator
[![npm package][npm-badge]][npm] ![build status][build-badge]
[npm]: https://www.npmjs.com/package/react-stack-navigator
[npm-badge]: https://badgen.net/npm/v/react-stack-navigator
[build-badge]: https://app.buddy.works/damianomagrini/react-stack-navigator/pipelines/pipeline/341819/badge.svg?token=e5daa5d3e303ec3297c953e5ba15c55dfd4e9b4d446a68a5572422a54db02fb1
A stack navigator for React inspired by Flutter's `Navigator` API and entirely based on pushing and popping.
## Installation
With npm,
```bash
npm i react-stack-navigator
```
With Yarn,
```bash
yarn add react-stack-navigator
```
TypeScript types are included out of the box! 📦
## Usage
Using the library is quite simple: just include a `` component, specifying the `root` route (i.e., the route at the bottom of the stack).
```jsx
import { StackNavigator } from 'react-stack-navigator';
export const App = () => {
return } />;
};
```
Then, inside your components, you can `push` and `pop` routes using the functions provided by the `useStackNavigator` hook (or, if you prefer, the `RoutingFunctionsContext` context).
```jsx
import { useStackNavigator } from 'react-stack-navigator';
export const ScreenA = () => {
const { push } = useStackNavigator();
return push()}>Push!;
};
```
This is very similar to Flutter's `Navigator`: indeed, when you `pop` a route, you can pass in a result, which will be returned asynchronously by the last `push` function.
```jsx
import { useStackNavigator } from 'react-stack-navigator';
export const ScreenA = () => {
const { push } = useStackNavigator();
return (
{
const result = await push()
console.log('Hello, ' + result); // Hello, World!
}}>Push!
);
};
export const ScreenB: React.FC = () => {
const { pop } = useStackNavigator();
return pop('World!')}>Pop!;
};
```
### Modal and non-modal routes
By passing a second argument to the `push` function, you can mark a route as modal. This option will affect the route's animation and will be available to the child route.
```jsx
import { useStackNavigator } from 'react-stack-navigator';
export const ScreenA = () => {
const { push } = useStackNavigator();
return (
push(, true)}>Push!
);
};
export const ScreenB: React.FC = () => {
// The given options are accessible to the child route
const { pop, isModal } = useStackNavigator();
return pop()}>Pop!;
};
```
### With React Router
Since navigating the stack does not alter the URL pathname but only the hash, you can include as many stack navigators as you wish in your React Router routes, without changing a single line of code—as you're not using a hash-based history: if you are, this library most likely doesn't suit your needs.
## Thanks
Big thanks to [Flutter](https://flutter.dev/) for the inspiration!