react-gesture-stack

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