All Projects → bmcmahen → React Cube Navigation

bmcmahen / React Cube Navigation

3d cube style navigation pattern, like that found in Instagram Stories

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to React Cube Navigation

Navigation Toolbar
Navigation toolbar is a slide-modeled UI navigation controller made by @Ramotion
Stars: ✭ 587 (+894.92%)
Mutual labels:  navigation, gesture
Mvvmrecurve
MVVM框架, 这个架构支持RestFul风格的Api和GraphQL,你可以根据自身需求添加recurve-retrofit2-support库(RestFul)或recurve-apollo-support库(GraphQL)实现相应的支持。 该架构同时使用纯Kotlin开发,但是你也可以在Java中使用它。
Stars: ✭ 51 (-13.56%)
Mutual labels:  navigation
Photobrowser
Elegant photo browser in Swift. 图片与视频浏览器。
Stars: ✭ 975 (+1552.54%)
Mutual labels:  gesture
I18nplugin
Intellij idea i18next support plugin
Stars: ✭ 43 (-27.12%)
Mutual labels:  navigation
Gonav
A Source Engine navigation mesh file parser written in Go.
Stars: ✭ 37 (-37.29%)
Mutual labels:  navigation
Intellij Cucumber Scala
Enables navigation between cucumber feature steps and glue code using cucumber-scala DSL.
Stars: ✭ 48 (-18.64%)
Mutual labels:  navigation
Pepper Robot Programming
Pepper Programs : Object Detection Real Time without ROS
Stars: ✭ 29 (-50.85%)
Mutual labels:  navigation
React Soft Slider
Simple, fast and impartial slider
Stars: ✭ 54 (-8.47%)
Mutual labels:  gesture
Deepseqslam
The Official Deep Learning Framework for Route-based Place Recognition
Stars: ✭ 49 (-16.95%)
Mutual labels:  navigation
React Responsive Navbar
Nothing crazy, nothing flashy, just a simple, flexible & completely customisable responsive navigation bar component.
Stars: ✭ 42 (-28.81%)
Mutual labels:  navigation
Simple Stack
[ACTIVE] Simple Stack, a backstack library / navigation framework for simpler navigation and state management (for fragments, views, or whatevers).
Stars: ✭ 1,012 (+1615.25%)
Mutual labels:  navigation
Jquery Menuflip
Create animated flipping menu links with this extremely lightweight jQuery plugin.
Stars: ✭ 39 (-33.9%)
Mutual labels:  navigation
Sesame
Android architecture components made right
Stars: ✭ 48 (-18.64%)
Mutual labels:  navigation
Gesture recognition
a gesture recognition verification lock
Stars: ✭ 37 (-37.29%)
Mutual labels:  gesture
Bookmarklet Maker
Tool to create bookmarklet/ javascript apps to automate the web browser.
Stars: ✭ 52 (-11.86%)
Mutual labels:  navigation
Jcnavigator
A decoupled navigator framework of jumping between modules or apps for iOS development.
Stars: ✭ 33 (-44.07%)
Mutual labels:  navigation
Material Bottom Nav
A bottom navigation bar adhering to the Material Design specification.
Stars: ✭ 41 (-30.51%)
Mutual labels:  navigation
Touchkit
基于mtouch封装的,更便于业务使用的贴纸手势库
Stars: ✭ 48 (-18.64%)
Mutual labels:  gesture
Lenav
一个简便的公司内部网址导航站,省去到处找服务地址烦恼......
Stars: ✭ 58 (-1.69%)
Mutual labels:  navigation
Rxgesture
RxSwift reactive wrapper for view gestures
Stars: ✭ 1,069 (+1711.86%)
Mutual labels:  gesture

react-cube-navigation

React Cube Navigation provides an animated cube style navigation pattern like that found in Instagram stories.

Demo on CodeSandbox

Features

  • Render an infinite number of panes
  • Gesture based controls
  • Spring based animations

Install

Install react-cube-navigation and its peer dependencies react-gesture-responder and react-spring using yarn or npm.

yarn add react-cube-navigation react-gesture-responder react-spring

Basic usage

import Cube from "react-cube-navigation";

const images = [
  "https://images.unsplash.com/photo-1565371557106-c2abcc6fb36a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
  "https://images.unsplash.com/photo-1565361849078-294849288ced?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
  "https://images.unsplash.com/photo-1565279799937-b397e6483124?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=619&q=80",
  "https://images.unsplash.com/photo-1565264216052-3c9012481a1f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
  "https://images.unsplash.com/photo-1565274952013-13cecde5c8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
  "https://images.unsplash.com/photo-1565287753977-e94d0227c640?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=633&q=80",
  "https://images.unsplash.com/photo-1565340076861-7a6667b36072?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80",
  "https://images.unsplash.com/photo-1565259901762-b8d797c6f887?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
];

function Example() {
  const [index, setIndex] = React.useState(0);

  return (
    <Cube
      index={index}
      onChange={i => setIndex(i)}
      width={300}
      height={600}
      hasNext={i => i < images.length - 1}
      renderItem={(i, active) => {
        return (
          <div
            style={{
              backgroundImage: `url(${images[i]})`,
              backgroundSize: "cover",
              flex: 1,
              borderRadius: "1rem"
            }}
          />
        );
      }}
    />
  );
}

API

Cube

Name Type Default Value Description
renderItem * (i: number, active: boolean) => React.ReactNode; A callback to render cube panes
onChange * (i: number) => void; A callback to update the current index
index * number |{ index: number, immediate: boolean} The index to render. Optionally pass an object with an index and immediate property to skip animations.
hasNext (i: number) => boolean true Whether another pane exists after the provided index
width number 200 The width of the cube in pixels
height number 600 The height of the cube in pixels
perspective number 1200 The perspective of the cube in pixels
paneStyle React.CSSProperties Pane container styles
scaleRange [number, number] [1, 0.95] The scale range to shrink the cube when swiping
lockScrolling boolean false Lock all page scrolling
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].