Skip to content
an animated stack view for the web similar to that found in iOS
Branch: master
Clone or download
Latest commit 3a04535 Jul 9, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook firstt Jul 6, 2019
src allow custom shadow (to support things like dark modes) Jul 9, 2019
stories allow custom shadow (to support things like dark modes) Jul 9, 2019
.gitignore update gitignore Jul 9, 2019
.npmignore firstt Jul 6, 2019
Readme.md Update Readme.md Jul 9, 2019
babel.config.js firstt Jul 6, 2019
demo.gif add demo Jul 9, 2019
jest.config.js firstt Jul 6, 2019
package.json 1.2.0 Jul 9, 2019
rollup.config.js firstt Jul 6, 2019
tsconfig.json firstt Jul 6, 2019
yarn.lock add scroll lock Jul 9, 2019

Readme.md

A demo showing views being swiped left and right.

react-gesture-stack

npm package Follow on Twitter

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.

This was originally built for use in Sancho-UI.

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

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 (
    <Stack
      onIndexChange={i => setIndex(i)}
      index={index}
      style={{ width: "400px", height: "600px" }}
      items={[
        {
          title: <StackTitle title="First title" />,
          content: (
            <StackItem>
              <button onClick={() => setIndex(index + 1)}>View 2</button>
            </StackItem>
          )
        },
        {
          title: <StackTitle title="Second title" />,
          content: (
            <StackItem>
              <button onClick={() => setIndex(index + 1)}>View 3</button>
            </StackItem>
          )
        },
        {
          title: <StackTitle title="Third title" />,
          content: (
            <StackItem>
              <div>No more!</div>
            </StackItem>
          )
        }
      ]}
    />
  );
}

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

You can’t perform that action at this time.