react-scepter-navigation-hoc
A react based navigation component state manager for scepter projects
Installation
npm install @source4society/react-scepter-navigation-hoc
or
yarn install @source4society/react-scepter-navigation-hoc
Usage
Add the HOC to the container which will display your navigation component react-scepter-navigation-menu and (if using) your react-scepter-hamburger-menu.
Give the same reducerKey prop to navigation component, hamburger menu, and this HOC. Clicking on the Hamburger menu will dispatch the proper events which will allow the HOC to manage the isAnimating and isHidden states. The following states are reduced:
HIDE_NAVIGATION // Sets isAnimating to true and kicks off a saga to wait animationDuration seconds before dispatching the NAVIGATION_HIDDEN action
NAVIGATION_HIDDEN // Sets isAnimating to false and isHidden to true
DISPLAY_NAVIGATION // Sets isAnimating to true and kicks off a saga to wait animationDuration seconds before dispatching the NAVIGATION_DISPLAYED event
NAVIGATION_DISPLAYED // Sets isAnimating to false and isHidden to false (initial state)
The following action creators can be dispatched:
hideNavigation(reducerKey, animationDuration) // Dispatches the HIDE_NAVIGATION action.
navigationHidden(reducerKey) // Dispatches the NAVIGATION_HIDDEN action.
displayNavigation(reducerKey, animationDuration) // Dispatches the DISPLAY_NAVIGATION action.
navigationDisplayed(reducerKey) // Dispatches the NAVIGATION_DISPLAYED action.