Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bmcmahen/react-gesture-stack
an animated stack view for the web similar to that found in iOS
https://github.com/bmcmahen/react-gesture-stack
gesture react react-spring stack
Last synced: about 2 months ago
JSON representation
an animated stack view for the web similar to that found in iOS
- Host: GitHub
- URL: https://github.com/bmcmahen/react-gesture-stack
- Owner: bmcmahen
- Created: 2019-07-06T06:11:18.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T15:22:08.000Z (over 1 year ago)
- Last Synced: 2024-07-18T03:30:56.883Z (2 months ago)
- Topics: gesture, react, react-spring, stack
- Language: TypeScript
- Homepage: https://codesandbox.io/embed/damp-monad-ukvcu
- Size: 8.65 MB
- Stars: 59
- Watchers: 1
- Forks: 0
- Open Issues: 29
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# react-gesture-stack
[](https://www.npmjs.com/package/react-gesture-stack)
[](https://twitter.com/intent/follow?screen_name=benmcmahen)
React-gesture-stack provides an iOS stack-like interface for use on the web. It supports gestures to "go back" in the stack. View the above example [on CodeSandbox](https://codesandbox.io/embed/damp-monad-ukvcu).
This was originally built for use in [Sancho-UI](https://github.com/bmcmahen/sancho).
## Install
Install `react-gesture-stack` and its peer dependency `react-gesture-responder` using yarn or npm.
```
yarn add react-gesture-stack react-gesture-responder
```
## Basic usage
```jsx
import { Stack, StackItem, StackTitle } from "react-gesture-stack";
// optional styles
import "react-gesture-stack/src/styles.css";
function Simple() {
const [index, setIndex] = React.useState(0);
return (
setIndex(i)}
index={index}
style={{ width: "400px", height: "600px" }}
items={[
{
title: ,
content: (
setIndex(index + 1)}>View 2
)
},
{
title: ,
content: (
setIndex(index + 1)}>View 3
)
},
{
title: ,
content: (
No more!
)
}
]}
/>
);
}
```
## API
### Stack
| Name | Type | Default Value | Description |
| ---------------- | -------------------- | ------------- | ------------------------------------------------------- |
| index \* | number | | The index of stack item to show |
| onIndexChange \* | (i: number) => void; | | A callback requesting the active stack item change |
| items \* | StackItemList[] | | A list of stack items to render (see the above example) |
| disableNav | boolean | false | Hide the top navigation pane |
| navHeight | number | 50 | The height of the navigation pane (in px) |
### StackItem
| Name | Type | Default Value | Description |
| -------- | ---------- | ------------- | ------------------------- |
| style | object | | Optional style attributes |
| children | React.Node | | Content of the stack item |
### StackTitle
| Name | Type | Default Value | Description |
| ------------- | ---------- | ------------- | ---------------------------------------------------------------------------- |
| title | React.Node | | The title of the stack item |
| backTitle | string | "Back" | The title of the back button |
| contentAfter | React.Node | | Content that appears to the right of the title |
| contentBefore | React.Node | | Content that appears to the left of the title (and replaces the back button) |
| backButton | React.Node | | Render a custom back button. You're responsible for listening to click handlers and updating the current index|
## License
MIT