feat(hooks): add useUIRouter and useCurrentState hooks

Author: christopherthielen

src/components/UIRouter.tsx

@@ -68,7 +68,7 @@ export const UIRouterInstanceUndefinedError = new Error(
  * const uiRouter = useUIRouter(config, states, plugins, router);
  * ```
  */
-export function useUIRouter(
+export function useInitializeUIRouter(
   configFn: (router: UIRouterReact) => void,
   states: Array<ReactStateDeclaration>,
   plugins: Array<PluginFactory<UIRouterPlugin>>,
@@ -169,7 +169,7 @@ export function useUIRouter(
  * ```
  */
 export function UIRouter({ config, states, plugins, router, children }: UIRouterProps) {
-  const uiRouter = useUIRouter(config, states, plugins, router);
+  const uiRouter = useInitializeUIRouter(config, states, plugins, router);
 
   return <UIRouterContext.Provider value={uiRouter}>{children}</UIRouterContext.Provider>;
 }

src/components/UISref.tsx

@@ -11,6 +11,7 @@ import * as _classNames from 'classnames';
 import { isFunction, TransitionOptions } from '@uirouter/core';
 
 import { UIRouterReact, UIRouterContext, StateRegistry } from '../index';
+import { useUIRouter } from './hooks';
 import { UIViewAddress, UIViewContext } from './UIView';
 import { UISrefActiveContext, AddStateInfoFn } from './UISrefActive';
 
@@ -41,7 +42,7 @@ export function getTransitionOptions(
 }
 
 export function useUISref(to: string, params: { [key: string]: any } = {}, options: TransitionOptions = {}): LinkProps {
-  const router = useContext(UIRouterContext);
+  const router = useUIRouter();
   const parentUIViewAddress = useContext(UIViewContext);
   const parentUISrefActiveAddStateInfo = useContext(UISrefActiveContext);
 

src/components/UISrefActive.tsx

@@ -7,7 +7,7 @@ import { useState, useCallback, useContext, useRef } from 'react';
 import { cloneElement } from 'react';
 import * as _classNames from 'classnames';
 
-import { useFirstRenderEffect } from './hooks';
+import { useFirstRenderEffect, useUIRouter } from './hooks';
 import { UIRouterReact, UIRouterContext } from '../index';
 import { UIViewAddress } from './UIView';
 import { UIRouterInstanceUndefinedError } from './UIRouter';
@@ -143,7 +143,7 @@ export interface UISrefActiveProps {
  * ```
  */
 export function UISrefActive({ children, className, class: classToApply, exact }: UISrefActiveProps) {
-  const router = useContext(UIRouterContext);
+  const router = useUIRouter();
   const parentUIViewAddress = useContext(UIViewContext);
   const parentAddStateInfo = useContext(UISrefActiveContext);
 

src/components/hooks/index.ts

@@ -1 +1,3 @@
+export * from './useCurrentState';
 export * from './useFirstRenderEffect';
+export * from './useUIRouter';

src/components/hooks/useCurrentState.ts

@@ -0,0 +1,19 @@
+import { StateParams } from '@uirouter/core';
+import { useEffect, useState } from 'react';
+import { useUIRouter } from './useUIRouter';
+
+export function useCurrentRouterState() {
+  const uiRouter = useUIRouter();
+  const { globals } = uiRouter;
+  const [stateData, setStateData] = useState({ state: globals.current, params: globals.params });
+
+  useEffect(() => {
+    uiRouter.transitionService.onSuccess({}, transition => {
+      const state = transition.to();
+      const params = transition.params('to') as StateParams;
+      setStateData({ state, params });
+    });
+  }, [uiRouter]);
+
+  return stateData;
+}

src/components/hooks/useUIRouter.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { UIRouterContext } from '../UIRouter';
+
+/** Returns the UIRouter object from React Context */
+export function useUIRouter() {
+  const router = useContext(UIRouterContext);
+  if (!router) {
+    throw new Error(`UIRouter instance is undefined. Did you forget to include the <UIRouter> as root component?`);
+  }
+  return router;
+}