react router v6

README.md

@@ -1,57 +1,162 @@
-# Typesafe-React-Router
+# react-route-type
 
-A collection of types and utility functions to facilitate typesafe routing in React-Router.
+A collection of types and utility functions to facilitate typesafe routing in react-router-dom and react-router-native.
 
-`npm i typesafe-react-router`
+npm
 
-![vscode](https://i.imgur.com/WQHOWKx.gif "VSCode")
-Note: This gif is using the 1.0 array-style API, rather than spread arguments used in 2.0. 
+`npm i react-route-type`
+
+yarn
+
+`yarn add react-route-type`
 
 ## Usage
 
 ```tsx
-import { route, param } from 'typesafe-react-router';
-
-export enum RouteNames {
-  HOME = "HOME"
-  VIEW_ALL = "VIEW_ALL"
-  VIEW_DETAILS = 'VIEW_DETAILS'
-}
+import { route } from "react-route-type";
 
 export const Routes = {
-  [RouteNames.HOME]: route('home');
-  [RouteNames.VIEW_ALL]: route('view')
-  [RouteNames.VIEW_DETAILS]: route('view', param('id'))
-}
+  home: route("home"),
+  view: route("view"),
+  details: route(["view", ":id"]),
+  users: route("users", { query: { search: "" } }),
+};
 
-const viewDetailsTemplate = Routes[RouteNames.VIEW_DETAILS].template() // -> /view/:id
-const viewDetailsCreate = Routes[RouteNames.VIEW_DETAILS].create({ id: '2' }) // -> /view/2
+const viewDetailsTemplate = Routes.details.template(); // -> /view/:id
+const viewDetailsCreate = Routes.details.create({ id: "2" }); // -> /view/2
 
-const viewDetailsCreateERROR = Routes[RouteNames.VIEW_DETAILS].create({}) // ERROR: property 'id' is missing in type {}
+const viewDetailsCreateERROR = Routes.details.create({}); // ERROR: property 'id' is missing in type {}
 
 // Usage with React Router
-import { Route, Switch } from 'react-router-dom';
-import { Home, Summary, Details } from './components'
+import { Route, Switch } from "react-router-dom";
+import { Home, Summary, Details } from "./components";
 export class App extends React.PureComponent {
   render() {
     <Switch>
-      <Route path={Routes[RouteNames.HOME].template()} component={Home} />
-      <Route path={Routes[RouteNames.VIEW].template()} component={Summary} />
-      <Route path={Routes[RouteNames.VIEW_DETAILS].template()} component={Details} />
-    </Switch>
+      <Route path={Routes.home.template()} component={Home} />
+      <Route path={Routes.view.template()} component={Summary} />
+      <Route path={Routes.details.template()} component={Details} />
+    </Switch>;
   }
 }
 
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 export class Home extends React.PureComponent {
   render() {
     <div>
       <h1>Welcome Home!</h1>
-      <Link to={Routes[RouteNames.VIEW_DETAILS].create({ id: '3' })} />
-      {/* ERROR: property 'id' is missing in type {} */}
-      <Link to={Routes[RouteNames.VIEW_DETAILS].create({})} />
-    </div>
+      <Link to={Routes.details.create({ id: "3" })} />
+      <Link to={Routes.view.create({})} />
+    </div>;
   }
 }
 ```
+
+## Hooks
+
+#### useParams
+
+Params is required
+
+```js
+export const Routes = {
+  details: route(["view", ":id"]),
+};
+
+// "/view/:id"
+<Route path={Routes.details.template()} component={Details} />;
+
+export const Details = () => {
+  const { id } = Routes.details.useParams();
+};
+```
+
+#### useQueryParam
+
+All property of query is optional
+
+```js
+export const View = () => {
+  const { search } = Routes.view.useQueryParam();
+};
+```
+
+With Default value
+
+```js
+const users = route(["users"], {
+  query: { withDefault: "default" },
+});
+
+export const Users = () => {
+  const { withDefault } = Routes.view.useQueryParam();
+
+  /// withDefault === "default" is true
+};
+```
+
+## Nested routes
+
+```js
+const home = route("home");
+const settings = route("settings").createNestedRoutes((parent)=>({
+   global: parent.route("global");
+   advanced: parent.route("advanced");
+}));
+
+// App.js
+function App() {
+  return (
+    <Routes>
+      <Route
+        path={home.template()} // "/home"
+        element={<Home />}
+      />
+      <Route
+        path={settings.root.template()} // "/settings/*"
+        element={<Settings />}
+      />
+    </Routes>
+  );
+}
+
+// Settings.js
+function Settings() {
+  return (
+    <Container>
+      <Conversations />
+
+      <Routes>
+        <Route
+          path={setting.global.template()} // "global"
+          element={<Global />}
+        />
+        <Route
+          path={setting.advanced.template()} // "advanced"
+          element={<Advanced />}
+        />
+      </Routes>
+    </Container>
+  );
+}
+```
+
+### useMap
+
+This is useful for create breadcrumb
+
+```js
+const routeMap = setting.advanced.useMap(); // [{path:"settings",create=()=>"/settings"},{path:"advanced",create=()=>"/settings/advanced"}]
+
+return (
+  //antd
+  <Breadcrumb>
+    {routeMap.map(({ path, create }) => {
+      <Breadcrumb.Item key={path}>
+        <a href={create()}></a>
+      </Breadcrumb.Item>;
+    })}
+  </Breadcrumb>
+);
+```

doc/.nojekyll

@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

doc/README.md

@@ -0,0 +1,149 @@
+react-route-type / [Exports](modules.md)
+
+# react-route-type
+
+A collection of types and utility functions to facilitate typesafe routing in react-router-dom and react-router-native.
+
+npm
+
+`npm i react-route-type`
+
+yarn
+
+`yarn add react-route-type`
+
+## Usage
+
+```tsx
+import { route } from "react-route-type";
+
+export const Routes = {
+  home: route("home"),
+  view: route("view"),
+  details: route(["view", ":id"]),
+  users: route("users", { query: { search: "" } }),
+};
+
+const viewDetailsTemplate = Routes.details.template(); // -> /view/:id
+const viewDetailsCreate = Routes.details.create({ id: "2" }); // -> /view/2
+
+const viewDetailsCreateERROR = Routes.details.create({}); // ERROR: property 'id' is missing in type {}
+
+// Usage with React Router
+import { Route, Switch } from "react-router-dom";
+import { Home, Summary, Details } from "./components";
+export class App extends React.PureComponent {
+  render() {
+    <Switch>
+      <Route path={Routes.home.template()} component={Home} />
+      <Route path={Routes.view.template()} component={Summary} />
+      <Route path={Routes.details.template()} component={Details} />
+    </Switch>;
+  }
+}
+
+import { Link } from "react-router-dom";
+
+export class Home extends React.PureComponent {
+  render() {
+    <div>
+      <h1>Welcome Home!</h1>
+      <Link to={Routes.details.create({ id: "3" })} />
+      <Link to={Routes.view.create({})} />
+    </div>;
+  }
+}
+```
+
+## Hooks
+
+#### useParams
+
+Params is required
+
+```js
+export const Routes = {
+  details: route(["view", ":id"]),
+};
+
+// route
+<Route path={Routes.details.template()} component={Details} />;
+
+export const Details = () => {
+  const { id } = Routes.details.useParams();
+};
+```
+
+#### useQueryParam
+
+All property of query is optional
+
+```js
+export const View = () => {
+  const { search } = Routes.view.useQueryParam();
+};
+```
+
+With Default value
+
+```js
+const users = route(["users"], {
+  query: { withDefault: "default" },
+});
+
+export const Users = () => {
+  const { withDefault } = Routes.view.useQueryParam();
+
+  /// withDefault === "default" is true
+};
+```
+
+## Nested routes
+
+```js
+const home = route("home");
+const settings = route("settings", { hasNested: true });
+const settingGlobal = settings.route("global");
+const settingAdvanced = settings.route("advanced");
+// App.js
+function App() {
+  return (
+    <Routes>
+      <Route
+        path={home.template()} // "/home"
+        element={<Home />}
+      />
+      <Route
+        path={settings.template()} // "/settings/*"
+        element={<Messages />}
+      />
+    </Routes>
+  );
+}
+
+// Messages.js
+function Messages() {
+  return (
+    <Container>
+      <Conversations />
+
+      <Routes>
+        <Route
+          path={settingGlobal.template()} // "global"
+          element={<Global />}
+        />
+        <Route
+          path={settingAdvanced.template()} // "advanced"
+          element={<Advanced />}
+        />
+      </Routes>
+    </Container>
+  );
+}
+```
+
+### useMap
+
+```js
+const routeMap = settingAdvanced.useMap(); // [{path:"settings",create=()=>"/settings"},{path:"advanced",create=()=>"/settings/advanced"}]
+```

doc/interfaces/Options.md

@@ -0,0 +1,47 @@
+[react-route-type](../README.md) / [Exports](../modules.md) / Options
+
+# Interface: Options<Q\>
+
+## Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `Q` | extends `QueryParamDefault` |
+
+## Table of contents
+
+### Properties
+
+- [hasNested](Options.md#hasnested)
+- [query](Options.md#query)
+- [title](Options.md#title)
+
+## Properties
+
+### hasNested
+
+• `Optional` **hasNested**: `boolean`
+
+#### Defined in
+
+[interfaces/types.ts:29](https://github.com/hosseinmd/react-route-type/blob/3deaec5/src/interfaces/types.ts#L29)
+
+___
+
+### query
+
+• `Optional` **query**: `Q`
+
+#### Defined in
+
+[interfaces/types.ts:28](https://github.com/hosseinmd/react-route-type/blob/3deaec5/src/interfaces/types.ts#L28)
+
+___
+
+### title
+
+• `Optional` **title**: `string`
+
+#### Defined in
+
+[interfaces/types.ts:30](https://github.com/hosseinmd/react-route-type/blob/3deaec5/src/interfaces/types.ts#L30)