Skip to content

A library to help build React apps with nested tabs and other containers that have their own history, complete with automatic altering of the browser's back and forward history

License

Notifications You must be signed in to change notification settings

kenfehling/react-router-nested-history

Repository files navigation

react-router-nested-history

A library to help build React apps with nested tabs and other containers that have their own history, complete with automatic altering of the browser's back and forward history to make it behave as you would expect a mobile app like Facebook or Twitter to behave.

Live demo

react-router-nested-history.herokuapp.com

Installation

npm install --save kenfehling/react-router-nested-history

react-router

This library is built to support react-router 4.

This library is very new and not battle-tested, although it does have unit tests, end-to-end tests, examples, and is used on my personal webpage. I would very much appreciate any feedback as I continue to solidify it. It's still under very active development.

Right now this library only works with browserHistory (HTML5 History API, not with hash history)

Roadmap

  • Nested container groups
  • End to end tests using Nightwatch.js
  • Support for title libraries like react-helmet
  • Transition animations (slide-in, slide-out)
  • Support for SSR (server-side rendering)
  • Support for components that lazy render (many existing React tab libraries)

API

HistoryRouter

Use this in place of react-router's BrowserRouter component to enable this library.

props (in addition to the existing BrowserRouter props)

name type default description
zeroPage string / The page at the beginning of the history stack

HistoryRoute

Use this in place of react-router's Route component to prevent a match's previous content from disappearing.

HistoryLink

Use this in place of react-router's Link component to enable history tracking for a link.

HeaderLink

Use this for a container's header link (typically a tab-like thing)

props

name type required description
toContainer string The name of the container this links to
className string The CSS class for styling this element
activeClassName string An alternate CSS class for styling the active item
children ReactNode or Function The children of this HeaderLink

children function params

name type description
isActive boolean Is this HeaderLink's associated Container active?

BackLink

Use this to place a back link (which only shows if there is back history)

props

name type required description
children ReactNode or ({params}) => ReactNode Defines what appears in the back link (default: 'Back')

Container

Use this component to wrap one or more HistoryRoute components to enable history for a container (a nested tab or window).

props

name type default required description
name string The name of this container (must be unique)
initialUrl string The path that the container starts on
patterns string[] A list of path patterns that will load in this container from a URL in the address bar
isDefault boolean false Consider this the default tab
animate boolean true Should this container use slide transition animations?
className string The CSS class for styling this element

ContainerGroup

Wraps one or more Container components that act as a group (a group of tabs, etc.)

props

name type default required description
name string The name of this group (must be unique)
isDefault boolean false Consider this the default tab (only for a nested group)
allowInterContainerHistory boolean false Allow history that would cause containers to switch
gotoTopOnSelectActive boolean false Go to the top of a tab if it's selected while already active
hideInactiveContainers boolean true Don't show the content of inactive containers
resetOnLeave boolean false Reset container's history when switching to another container
children ReactNode or Function The children of this ContainerGroup

children function params

name type description
currentContainerIndex number The index of the current container
currentContainerName string The name of the current container
stackOrder Container[] The containers ordered by how recently they were activated
setCurrentContainerIndex (number)=>void Switch the current container by index
setCurrentContainerName (string)=>void Switch the current container by name

WindowGroup

A convenience component that wraps a ContainerGroup and is meant for creating a group of HistoryWindow components that overlap and are layered in the order that they were last accessed.

props

Same as ContainerGroup but with changes in defaults.

name type default required description
hideInactiveContainers boolean false Don't render the content of inactive containers

children function params

Same as ContainerGroup except with these additions:

name type description
openWindow ({name:string}|{index:number}) => void Open a window in this group
resetWindowPositions () => void Restore the positions of the windows in this group to their original values

HistoryWindow

A single window inside a WindowGroup

props

name type default required description
forName string The name of the container or group this window wraps
visible boolean true Is this window visible?
draggable boolean false Uses [react-draggable](https://github.com/mzabriskie/react-draggable) to make window draggable
draggableProps Object {} Props passed to the Draggable component
rememberPosition boolean true if draggable Remember the position this window was dragged to?
left/center/right number (in pixels) Position horizontally based on (only) one of these anchor points
top/middle/bottom number (in pixels) Position vertically based on (only) one of these anchor points
className string The CSS class used to style this window
topClassName string The CSS class used when this window is on top
children ReactNode or Function The children of this HistoryWindow

children function params

name type description
open () => void Make this window visible
close () => void Make this window invisible
switchTo () => void Switch to this window

ScrollArea

Keeps track of scrolling inside a container

props

name type default required description
resetOnLeave boolean false Reset the scroll position when the container is left
horizontal boolean false Use horizontal scrolling
vertical boolean false Use vertical scrolling

WhenActive

Use inside a container to only render something when the container is active. An example use case is with a library like react-helmet. With several windows open Helmet can get confused over which title, etc. to use. Wrapping Helmet in WhenActive makes it only pay attention to the active container.

About

A library to help build React apps with nested tabs and other containers that have their own history, complete with automatic altering of the browser's back and forward history

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published