Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

Pager

Pager provides views that can be swiped horizontally -- a pattern you commonly find on mobile devices. It works well when combined with tabs. Note that, by default, the Pager does not respond to mouse events so responsive websites should employ buttons (tabs, arrow buttons, etc.) to aid navigation.

Because Pager uses react-gesture-responder you can delegate between it and other gesture based components. This means you can do things like embed gesture views within eachother.

Full instructions can be found on react-page-controller.

Basic usage

Try swiping the views below on a touch-based device.

Next
/** @jsx jsx */

function PagerExample() {
  const [page, setPage] = React.useState(0);
  const theme = useTheme();

  return (
    <DarkMode>
      <Pager
        css={{
          "& .Gesture-view__pane > *": {
            padding: "100px",
            display: "flex",
            justifyContent: "center",
            boxSizing: "border-box",
            width: "100%",
            flex: 1,
            alignItems: "center"
          }
        }}
        value={page}
        onRequestChange={i => setPage(i)}
      >
        <div css={{ background: "#4a9eda" }}>
          <Button variant="outline" onPress={() => setPage(1)}>
            Next
          </Button>
        </div>
        <div css={{ background: "#7f8a93" }}>
          <Button variant="outline" onPress={() => setPage(2)}>
            Next
          </Button>
        </div>
        <div css={{ background: "#9966e0" }}>
          <Button variant="outline" onPress={() => setPage(3)}>
            Next
          </Button>
        </div>
        <div css={{ background: "#e066ad" }}>
          <Button variant="outline" onPress={() => setPage(4)}>
            Next
          </Button>
        </div>
        <div css={{ background: "#d7c938" }}>
          <Button variant="outline" onPress={() => setPage(0)}>
            Back to start
          </Button>
        </div>
      </Pager>
    </DarkMode>
  );
}

API

ForwardRefExoticComponent
value*number
enableMouseboolean
enableGesturesboolean
focusOnChangeboolean
enableScrollLockboolean
onRequestChange*(value: number) => void
animationConfigSpringConfig
lazyLoadboolean
onSetLazy(suggestedIndex: number) => number[]
onTerminationRequest(state: StateType, e?: ResponderEvent) => boolean
onMoveShouldSet(state: StateType, e: ResponderEvent, suggested: boolean) => boolean
Optionally override onMoveShouldSet defaults
GestureView
value*number
enableMouseboolean
enableGesturesboolean
focusOnChangeboolean
enableScrollLockboolean
onRequestChange*(value: number) => void
animationConfigSpringConfig
lazyLoadboolean
onSetLazy(suggestedIndex: number) => number[]
onTerminationRequest(state: StateType, e?: ResponderEvent) => boolean
onMoveShouldSet(state: StateType, e: ResponderEvent, suggested: boolean) => boolean
Optionally override onMoveShouldSet defaults