React Routeways - API Reference
React Routeways - API Reference
Table of contents
Interfaces
Type Aliases
- LinkProps
- NavLinkProps
- NavigateMethods
- NavigateProps
- NavigatorHook
- NonOptional
- Nullable
- Optional
- ParamLinkProps
- ParamNavLinkProps
- ParamNavigateProps
- UsePathVars
- UseQueryParam
- UseQueryParameters
- UseRouteParams
Functions
- Link
- NavLink
- Navigate
- Route
- Routes
- createNavigatorHook
- isFunctionAction
- safeKeys
- useNavigation
- usePathVars
- useQueryParam
- useQueryParameters
- useRouteParams
Type Aliases
LinkProps
Ƭ LinkProps<T>: BaseLinkProps<T> & ParamLinkProps<T> & Omit<OriginalLinkProps, "to">
Type parameters
| Name | Type |
|---|---|
T |
extends Routeway |
Defined in
src/lib/components/Link.component.tsx:30
NavLinkProps
Ƭ NavLinkProps<T>: BaseNavLinkProps<T> & ParamNavLinkProps<T> & Omit<OriginalNavLinkProps, "to">
Type parameters
| Name | Type |
|---|---|
T |
extends Routeway |
Defined in
src/lib/components/NavLink.component.tsx:30
NavigateMethods
Ƭ NavigateMethods<V, Q>: keyof V extends never ? { navigate: <S>(params?: RouteParams<V, Q>, options?: NavigateOptions<S>) => void ; reset: <S>(params?: RouteParams<V, Q>, options?: NavigateOptions<S>) => void } : { navigate: <S>(params: RouteParams<V, Q>, options?: NavigateOptions<S>) => void ; reset: <S>(params: RouteParams<V, Q>, options?: NavigateOptions<S>) => void }
Type parameters
| Name | Type |
|---|---|
V |
extends CodecMap |
Q |
extends CodecMap |
Defined in
src/lib/hooks/createNavigatorHook.ts:19
NavigateProps
Ƭ NavigateProps<T>: BaseNavigateProps<T> & ParamNavigateProps<T> & Omit<OriginalNavigateProps, "to">
Type parameters
| Name | Type |
|---|---|
T |
extends Routeway |
Defined in
src/lib/components/Navigate.component.tsx:30
NavigatorHook
Ƭ NavigatorHook<T>: { [K in keyof T]: T[K] extends Routeway<PathLike, infer V, infer Q, infer S> ? keyof S extends never ? NavigateMethods<V, Q> : NavigatorHook<S> & NavigateMethods<V, Q> : never }
Type parameters
| Name | Type |
|---|---|
T |
extends Record<string, Routeway> |
Defined in
src/lib/hooks/createNavigatorHook.ts:7
NonOptional
Ƭ NonOptional<T>: Exclude<T, undefined>
Type parameters
| Name |
|---|
T |
Defined in
Nullable
Ƭ Nullable<T>: T | null
Type parameters
| Name |
|---|
T |
Defined in
Optional
Ƭ Optional<T>: T | undefined
Type parameters
| Name |
|---|
T |
Defined in
ParamLinkProps
Ƭ ParamLinkProps<T>: T extends Routeway<PathLike, infer V, CodecMap> ? keyof V extends never ? { params?: Parameters<T["makeUrl"]>[0] } : { params: Parameters<T["makeUrl"]>[0] } : never
Type parameters
| Name | Type |
|---|---|
T |
extends Routeway |
Defined in
src/lib/components/Link.component.tsx:12
ParamNavLinkProps
Ƭ ParamNavLinkProps<T>: T extends Routeway<PathLike, infer V, CodecMap> ? keyof V extends never ? { params?: Parameters<T["makeUrl"]>[0] } : { params: Parameters<T["makeUrl"]>[0] } : never
Type parameters
| Name | Type |
|---|---|
T |
extends Routeway |
Defined in
src/lib/components/NavLink.component.tsx:12
ParamNavigateProps
Ƭ ParamNavigateProps<T>: T extends Routeway<PathLike, infer V, CodecMap> ? keyof V extends never ? { params?: Parameters<T["makeUrl"]>[0] } : { params: Parameters<T["makeUrl"]>[0] } : never
Type parameters
| Name | Type |
|---|---|
T |
extends Routeway |
Defined in
src/lib/components/Navigate.component.tsx:12
UsePathVars
Ƭ UsePathVars<V>: [V, Dispatch<SetStateAction<V>>]
Type parameters
| Name | Type |
|---|---|
V |
extends Record<string, unknown> |
Defined in
src/lib/hooks/usePathVars.hook.ts:7
UseQueryParam
Ƭ UseQueryParam<T>: [T, Dispatch<SetStateAction<T>>]
Type parameters
| Name |
|---|
T |
Defined in
src/lib/hooks/useQueryParam.hook.ts:7
UseQueryParameters
Ƭ UseQueryParameters<Q>: [Partial<Q>, Dispatch<SetStateAction<Partial<Q>>>]
Type parameters
| Name | Type |
|---|---|
Q |
extends Record<string, unknown> |
Defined in
src/lib/hooks/useQueryParameters.hook.ts:7
UseRouteParams
Ƭ UseRouteParams<T>: [T, Dispatch<SetStateAction<T>>]
Type parameters
| Name | Type |
|---|---|
T |
extends Record<string, unknown> |
Defined in
src/lib/hooks/useRouteParams.hook.ts:9
Functions
Link
▸ Link<T>(props): ReactElement
A wrapper over react-router-dom’s <Link> component, with the difference
that the to prop expects a Routeway route instead of a path string.
If the route requires path variables and/or query parameters, you can pass
them over the params prop.
Type parameters
| Name | Type |
|---|---|
T |
extends Routeway |
Parameters
| Name | Type |
|---|---|
props |
LinkProps<T> |
Returns
ReactElement
Defined in
src/lib/components/Link.component.tsx:42
NavLink
▸ NavLink<T>(props): ReactElement
A wrapper over react-router-dom’s <NavLink> component, with the difference
that the to prop expects a Routeway route instead of a path string.
If the route requires path variables and/or query parameters, you can pass
them over the params prop.
Type parameters
| Name | Type |
|---|---|
T |
extends Routeway |
Parameters
| Name | Type |
|---|---|
props |
NavLinkProps<T> |
Returns
ReactElement
Defined in
src/lib/components/NavLink.component.tsx:42
Navigate
▸ Navigate<T>(props): ReactElement
A wrapper over react-router-dom’s <Navigate> component, with the difference
that the to prop expects a Routeway route instead of a path string.
If the route requires path variables and/or query parameters, you can pass
them over the params prop.
Type parameters
| Name | Type |
|---|---|
T |
extends Routeway |
Parameters
| Name | Type |
|---|---|
props |
NavigateProps<T> |
Returns
ReactElement
Defined in
src/lib/components/Navigate.component.tsx:42
Route
▸ Route(props): Nullable<ReactElement<any, string | JSXElementConstructor<any>>>
Same as react-router-dom’s <Route> component, but it replaces the path
prop with route, where you can pass as Routeway route which will be used
to create the path.
Parameters
| Name | Type |
|---|---|
props |
RouteProps |
Returns
Nullable<ReactElement<any, string | JSXElementConstructor<any>>>
Defined in
src/lib/components/Route.component.tsx:39
Routes
▸ Routes(props): Nullable<ReactElement<any, string | JSXElementConstructor<any>>>
A “wrapper” over react-router-dom’s <Routes> component which allows the use
of react-routeways’ Route components as children.
Parameters
| Name | Type |
|---|---|
props |
RoutesProps |
Returns
Nullable<ReactElement<any, string | JSXElementConstructor<any>>>
Defined in
src/lib/components/Routes.component.tsx:37
createNavigatorHook
▸ createNavigatorHook<T>(routes): () => NavigatorHook<T>
Creates a hook that returns a “Navigator” obeject from your custom routes. This provides natural experience of imperative navigation based on your routes structure.
Type parameters
| Name | Type |
|---|---|
T |
extends Record<string, Routeway> |
Parameters
| Name | Type | Description |
|---|---|---|
routes |
T |
the custom Routeways routes |
Returns
fn
a navigation hook of the custom Routeways routes
▸ (): NavigatorHook<T>
Returns
Defined in
src/lib/hooks/createNavigatorHook.ts:39
isFunctionAction
▸ isFunctionAction<T>(value): value is Function
Type parameters
| Name |
|---|
T |
Parameters
| Name | Type |
|---|---|
value |
SetStateAction<T> |
Returns
value is Function
Defined in
safeKeys
▸ safeKeys<T>(obj): Extract<keyof T, string>[]
Type parameters
| Name | Type |
|---|---|
T |
extends Record<never, unknown> |
Parameters
| Name | Type |
|---|---|
obj |
T |
Returns
Extract<keyof T, string>[]
Defined in
useNavigation
▸ useNavigation(): Navigation
Returns an object which contains navigation functions that can be used along
with Routeways routes.
Returns
an object with navigation functions
Defined in
src/lib/hooks/useNavigation.hook.ts:118
usePathVars
▸ usePathVars<T>(route): UsePathVars<ReturnType<T["parseUrl"]>["pathVars"]>
Returns a tuple of a stateful value of the path variables, and a function to update them. Just like the useState hook would.
However, because changing path variables means that the current location may also be different, an update to the path variables will produce a navigate using the updated values.
Type parameters
| Name | Type |
|---|---|
T |
extends Routeway |
Parameters
| Name | Type | Description |
|---|---|---|
route |
T |
the Routeway route to use to parse the path variables |
Returns
UsePathVars<ReturnType<T["parseUrl"]>["pathVars"]>
a stateful value of the path variables, and a function to update them
Defined in
src/lib/hooks/usePathVars.hook.ts:25
useQueryParam
▸ useQueryParam<Q, K>(route, key): UseQueryParam<Optional<CodecsToRecord<Q>[K]>>
Returns a tuple of a stateful value of the specified query param, and a function to update it. Just like the useState hook would.
However, because the source of truth for this state is the current url, whenever the state is updated in one component, it will be also updated in other components using the same query param state. This keeps consistency across the state and the URL all the time.
Type parameters
| Name | Type |
|---|---|
Q |
extends CodecMap |
K |
extends string |
Parameters
| Name | Type | Description |
|---|---|---|
route |
Routeway<`/${string}`, CodecMap, Q> |
the Routeway route to use to parse the query param |
key |
K |
the key of the specific query param to use |
Returns
UseQueryParam<Optional<CodecsToRecord<Q>[K]>>
a stateful value of the query param, and a function to update it
Defined in
src/lib/hooks/useQueryParam.hook.ts:30
▸ useQueryParam<Q, K>(route, key, fallback): UseQueryParam<NonOptional<CodecsToRecord<Q>[K]>>
Returns a tuple of a stateful value of the specified query param, and a function to update it. Just like the useState hook would.
However, because the source of truth for this state is the current location, whenever the state is updated in one component, it will be also updated in other components using the same query param state. This keeps consistency across the state and the location all the time.
Type parameters
| Name | Type |
|---|---|
Q |
extends CodecMap |
K |
extends string |
Parameters
| Name | Type | Description |
|---|---|---|
route |
Routeway<`/${string}`, CodecMap, Q> |
the Routeway route to use to parse the query param |
key |
K |
the key of the specific query param to use |
fallback |
CodecsToRecord<Q>[K] |
an optional fallback value in case the query param is not present in the url, undefined, or null |
Returns
UseQueryParam<NonOptional<CodecsToRecord<Q>[K]>>
a stateful value of the query param, and a function to update it
Defined in
src/lib/hooks/useQueryParam.hook.ts:50
useQueryParameters
▸ useQueryParameters<T>(route): UseQueryParameters<ReturnType<T["parseUrl"]>["queryParams"]>
Returns a tuple of a stateful value of all query parameters, and a function to update them. Just like the useState hook would.
However, because the source of truth for this state is the current location, whenever the state is updated in one component, it will be also updated in other components using the same state from this hook. This keeps consistency across the state and the location all the time.
Type parameters
| Name | Type |
|---|---|
T |
extends Routeway |
Parameters
| Name | Type | Description |
|---|---|---|
route |
T |
the Routeway route to use to parse the query parameters |
Returns
UseQueryParameters<ReturnType<T["parseUrl"]>["queryParams"]>
a stateful value of the query parameters, and a function to update them
Defined in
src/lib/hooks/useQueryParameters.hook.ts:28
useRouteParams
▸ useRouteParams<T>(route): UseRouteParams<NonOptional<Parameters<T["makeUrl"]>[0]>>
Returns a tuple of a stateful value of both the path variables and query parameters, and a function to update them. Just like the useState hook would.
This hook uses both usePathVars and useQueryParameters, so updating parameters may have the same effects as in both hooks.
Type parameters
| Name | Type |
|---|---|
T |
extends Routeway |
Parameters
| Name | Type | Description |
|---|---|---|
route |
T |
the Routeway route to use to parse the path variables and query parameters |
Returns
UseRouteParams<NonOptional<Parameters<T["makeUrl"]>[0]>>
a stateful value of both the path variables and query parameters, and a function to update them
See