text: {data} num: {num}
\n)\nconst Memoized = reactMemoEq(\n Inner,\n E.getStructEq
({\n text: E.eqString,\n num: E.eqNum,\n }),\n)\nconst Landing = ({ interceptable }) => (\n \n);\n```\n\n### Transforming deeply nested state functionally\n\n[Optics](https://github.com/gcanti/monocle-ts) can help you transform deeply nested interceptable:\n\n```ts\nimport * as M from 'monocle-ts';\nimport * as T from 'fp-ts/lib/Task';\nimport { pipe } from 'fp-ts/lib/pipeable';\ninterface MyInterceptable {\n user: {\n memories: {\n childhood: {\n favoriteColor?: string;\n }\n }\n }\n}\nconst favoriteColorLens = M.Lens.fromPath()([\n 'user', 'memories', 'childhood', 'favoriteColor',\n]);\nconst interceptRoute = (route: R, interceptable: MyInterceptable) => {\n if (\n route.type === 'favoriteColorRoute'\n && favoriteColorLens.get(interceptable) === undefined\n ) {\n return {\n async: {\n interceptable: pipe(\n loadFavoriteColor(),\n T.map(\n (favoriteColor) => favoriteColorLens.set(favoriteColor)(interceptable)\n )\n )\n },\n }\n }\n};\n```\n\n# Docs\n\n## `createNavigator`\n\n`createNavigator` creates a function that you can export and use anywhere in your app to reroute using the provided routing [ADT](https://dev.to/gcanti/functional-design-algebraic-data-types-36kf). Internally, `withInterceptingRouter` uses `createNavigator` for redirects.\n\n### `createNavigator` Function Type\n\n```ts\nimport { Navigation } from 'react-fp-ts-routing';\nexport function createNavigator (\n formatter: ((r: R) => string),\n): (navigation: Navigation) => void\n```\n\n| Type Variable | Description |\n| ------------- | ----------- |\n| `R` | Routing ADT type |\n\n| Param | Description |\n| ------ | ------------ |\n| `formatter` | Converts routing ADT into a url path string |\n\n## `withStaticRouter` [HOC](https://reactjs.org/docs/higher-order-components.html)\n\n### `withStaticRouter` Output Prop Types\n\nThe `Router` component that `withInterceptingRouter` wraps is given the props `SimpleRouterProps`:\n\n```ts\ninterface SimpleRouterProps {\n route: R;\n}\n```\n| Type Variable | Description |\n| ------------- | ----------- |\n| `R` | Routing ADT type |\n\n| Prop | Description |\n| ------ | ------------ |\n| `route` | Your app's current route, represented as your routing ADT |\n\n### `withStaticRouter` Function Type\n```tsx\nimport { Parser } from 'fp-ts-routing'\nimport * as History from 'history'\nfunction withStaticRouter(\n Router: React.ComponentType>,\n parser: Parser,\n formatter: ((r: R) => string),\n notFoundRoute: R,\n): React.ComponentType\n```\n\n| Type Variable | Description |\n| ------------- | ----------- |\n| `R` | Routing ADT type |\n| `T` | Other arbitrary props passed into `Router`, defaults to the empty object |\n\n| Param | Description |\n| ------ | ------------ |\n| `Router` | Your app's router component |\n| `parser` | Converts url path strings into routing ADT |\n| `notFoundRoute` | ADT to use when `parser` can't find a route |\n\n## `withInterceptingRouter` [HOC](https://reactjs.org/docs/higher-order-components.html)\n\n### `withInterceptingRouter` Output Prop Types\n\nThe `Router` component that `withInterceptingRouter` wraps is given the props `RouterProps`:\n\n```ts\nimport * as N from 'react-fp-ts-routing/lib/Navigation';\nexport interface InterceptingRouterProps {\n route: R;\n interceptable: I;\n setInterceptable: SetInterceptable;\n}\nexport type SetInterceptable = (newInterceptable?: I) => T.Task;\n```\n| Type Variable | Description |\n| ------------- | ----------- |\n| `R` | Routing ADT type |\n| `I` | [interceptable](#what-is-an-interceptable) type |\n\n| Prop | Description |\n| ------ | ------------ |\n| `interceptable` | Your router's [interceptable](#what-is-an-interceptable) |\n| `route` | Your app's current route, represented as your routing ADT |\n| `updateRouter` | Optionally updates [interceptable](#what-is-an-interceptable) and then optionally invokes a [`Navigation`](#internal-adts) |\n\n### `withInterceptingRouter` Function Type\n```tsx\nimport { Parser } from 'fp-ts-routing'\nimport { Navigation, Action } from 'react-fp-ts-routing';\nimport * as History from 'history'\ntype InterceptRoute = (\n newRoute: R,\n interceptable: I,\n oldRoute: R,\n Action: Action,\n) => InterceptRouteResponse;\ninterface InterceptRouteResponse {\n sync?: Interception;\n async?: T.Task>;\n}\ninterface Interception {\n interceptable?: I;\n redirect?: Navigation;\n}\nfunction withInterceptingRouter(\n Router: React.ComponentType>,\n parser: Parser,\n formatter: ((r: R) => string),\n notFoundRoute: R,\n defaultManagedState: S,\n interceptRoute?: interceptRoute,\n): React.ComponentType\n```\n\n| Type Variable | Description |\n| ------------- | ----------- |\n| `R` | Routing ADT type |\n| `I` | [interceptable](#what-is-an-interceptable) type |\n| `T` | Other arbitrary props passed into `Router`, defaults to the empty object |\n\n| Param | Description |\n| ------ | ------------ |\n| `Router` | Your app's router component |\n| `parser` | Converts url path strings into routing ADT |\n| `formatter` | Converts routing ADT into a url path string |\n| `notFoundRoute` | ADT to use when `parser` can't find a route |\n| `defaultinterceptable` | Populates [interceptable](#what-is-an-interceptable) before component is mounted |\n| `interceptRoute` | Updates the router using the new route and preexisting [interceptable](#what-is-an-interceptable) |\n\n## Internal ADTs\n\n### Navigation\n\n`Navigation` is an ADT representing the different possible [`history navigations`](https://github.com/ReactTraining/history/blob/master/docs/Navigation.md).\n\n| `Navigation` Type | Description |\n| ------------- | ----------- |\n| `Navigation.push(route: R)` | Reroutes to routing ADT `R` |\n| `Navigation.replace(route: R)` | Reroutes to routing ADT `R` [without pushing new entry](https://stackoverflow.com/questions/39340108/what-is-the-trade-off-between-history-push-and-replace) onto the [history stack](https://developer.mozilla.org/en-US/docs/Web/API/History_API), so the browser's `back` button won't be able to go back to original location |\n| `Navigation.pushExt(path: string)` | `N.push` that can reroute to somewhere outside of your app |\n| `Navigation.replaceExt(path: string)` | `N.replace` that can reroute to somewhere outside of your app |\n| `Navigation.go(delta: number)` | Moves `delta` number of times through the session [history stack](https://developer.mozilla.org/en-US/docs/Web/API/History_API). Can be positive or negative. |\n| `Navigation.goBack` | Moves back one page in the [history stack](https://developer.mozilla.org/en-US/docs/Web/API/History_API) |\n| `Navigation.goForward` | Moves forward one pack in the [history stack](https://developer.mozilla.org/en-US/docs/Web/API/History_API) |\n\n### Action\n\n`Action` is an ADT representing the different possible ways the browser arrived at its current location.\n\n| `Action` Type | Description |\n|---------------|-------------|\n| `Action.push` | The url was pushed onto the stack. (The user clicked a link, or your app used `N.push`) |\n| `Action.pop` | The url was popped from the stack. (The user hit the browser's `back` button, or your app used `N.go` or `N.goBack`) |\n| `Action.replace` | The url replaced the top entry of the stack. (Your app used `N.replace`) |\n\n\n## TODO\n- use [`window.history`](https://developer.mozilla.org/en-US/docs/Web/API/Window/history) and [WindowEventHandlers](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers) instead of [`history`](https://github.com/ReactTraining/history)\n","readmeFilename":"README.md"}