Skip to content

Commit 299d7e1

Browse files
authored
Update README.md
1 parent bddfbb2 commit 299d7e1

File tree

1 file changed

+47
-41
lines changed

1 file changed

+47
-41
lines changed

README.md

Lines changed: 47 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ npm i effector effector-react react
2020

2121
## Usage
2222

23-
### `RouterProvider` - provides router instance
23+
### Component API
24+
25+
#### `RouterProvider` - provides router instance
2426

2527
Wrap your app into this:
2628

@@ -41,7 +43,7 @@ const App = () => {
4143
};
4244
```
4345

44-
### `Link` - render a link
46+
#### `Link` - render a link
4547

4648
Simple usage:
4749

@@ -71,49 +73,19 @@ import { Link } from "atomic-router-react";
7173
/>;
7274
```
7375

74-
### `createRoutesView` - render routes
76+
#### `Route` - render route
7577

7678
```tsx
77-
import { createRouteView, RouterProvider } from "atomic-router-react";
78-
79-
// { route: RouteInstance<...>, view: FC<...> }
80-
import * as Home from "@/pages/home";
81-
import * as Post from "@/pages/post";
82-
83-
import { router } from "@/app/routing";
84-
85-
const RoutesView = createRoutesView({
86-
routes: [
87-
{ route: Home.route, view: Home.Page },
88-
{ route: Post.route, view: Post.Page },
89-
],
90-
otherwise: () => {
91-
return <div>Page not found!</div>;
92-
},
93-
});
79+
import { Route } from "atomic-router-react";
9480

95-
const App = () => {
96-
return (
97-
<RouterProvider router={router}>
98-
<RoutesView />
99-
</RouterProvider>
100-
);
101-
};
81+
<Route route={homeRoute} view={HomePage} />;
10282
```
10383

104-
You can also set only a part of `createRoutesView` config on create and pass the rest of it via props:
84+
### Declarative API
10585

106-
```tsx
107-
// Set specific otherwise view
108-
const RoutesView = createRoutesView({
109-
otherwise: SpecificNotFound,
110-
});
11186

112-
// Pass the routes as a prop
113-
<RoutesView routes={routes} />;
114-
```
11587

116-
### `createRouteView` - render view if route is opened
88+
#### `createRouteView` - render view if route is opened
11789

11890
```tsx
11991
import { createRoute } from "atomic-router";
@@ -144,12 +116,46 @@ const PostsList = createRouteView({
144116
});
145117
```
146118

147-
Like in `createRoutesView`, you can set only a part of `createRouteView` config on create and pass the rest of it via props.
119+
You can also set only a part of `createRouteView` config on create and pass the rest of it via props.
148120

149-
### `Route` - render route
121+
#### `createRoutesView` - render routes
150122

151123
```tsx
152-
import { Route } from "atomic-router-react";
124+
import { createRouteView, RouterProvider } from "atomic-router-react";
153125

154-
<Route route={homeRoute} view={HomePage} />;
126+
// { route: RouteInstance<...>, view: FC<...> }
127+
import * as Home from "@/pages/home";
128+
import * as Post from "@/pages/post";
129+
130+
import { router } from "@/app/routing";
131+
132+
const RoutesView = createRoutesView({
133+
routes: [
134+
{ route: Home.route, view: Home.Page },
135+
{ route: Post.route, view: Post.Page },
136+
],
137+
otherwise: () => {
138+
return <div>Page not found!</div>;
139+
},
140+
});
141+
142+
const App = () => {
143+
return (
144+
<RouterProvider router={router}>
145+
<RoutesView />
146+
</RouterProvider>
147+
);
148+
};
149+
```
150+
151+
Like in `createRouteView`, you can set only a part of `createRoutesView` config on create and pass the rest of it via props:
152+
153+
```tsx
154+
// Set specific otherwise view
155+
const RoutesView = createRoutesView({
156+
otherwise: SpecificNotFound,
157+
});
158+
159+
// Pass the routes as a prop
160+
<RoutesView routes={routes} />;
155161
```

0 commit comments

Comments
 (0)