Skip to content

Commit

Permalink
Merge branch 'main' into patch-1
Browse files Browse the repository at this point in the history
  • Loading branch information
ai authored May 19, 2024
2 parents eea6d6b + d8e230e commit 75ae2bf
Showing 1 changed file with 6 additions and 13 deletions.
19 changes: 6 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
A tiny URL router for [Nano Stores](https://github.com/nanostores/nanostores)
state manager.

* **Small.** 684 bytes (minified and brotlied). Zero dependencies.
* Good **TypeScript** support.
* Framework agnostic. Can be used with **React**, **Preact**, **Vue**,
- **Small.** 684 bytes (minified and brotlied). Zero dependencies.
- Good **TypeScript** support.
- Framework agnostic. Can be used with **React**, **Preact**, **Vue**,
**Svelte**, **Angular**, **Solid.js**, and vanilla JS.

Since Nano Stores promote moving logic to store, the router is a store,
Expand Down Expand Up @@ -51,24 +51,21 @@ export const Layout = () => {

---

<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" /> Made in <b><a href="https://evilmartians.com/devtools?utm_source=nanostores-router&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.
<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" /> Made in <b><a href="https://evilmartians.com/devtools?utm_source=nanostores-router&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.

---


## Install

```sh
npm install nanostores @nanostores/router
```


## Usage

See [Nano Stores docs](https://github.com/nanostores/nanostores#guide)
about using the store and subscribing to store’s changes in UI frameworks.


### Routes

Routes is an object of route’s name to route pattern:
Expand Down Expand Up @@ -111,10 +108,9 @@ createRouter({
*/
```


### Search Query Routing

Router value contains parsed url search params:
Router value contains parsed URL search params (like `?sort=name`):

```js
createRouter({ home: '/posts/:category' })
Expand Down Expand Up @@ -143,7 +139,6 @@ router.get() //=> {
// }
```


### Clicks Tracking

By default, router and `?search` params store will add `click` event listener
Expand Down Expand Up @@ -173,7 +168,6 @@ export const Link = (props) => {
}
```


### URL Generation

Using `getPagePath()` avoids hard coding URL in templates. It is better
Expand All @@ -192,7 +186,7 @@ or `redirectPage`:
```ts
import { openPage, redirectPage } from '@nanostores/router'

function requireLogin () {
function requireLogin() {
openPage($router, 'login')
}

Expand All @@ -209,7 +203,6 @@ getPagePath($router, 'list', { category: 'guides' }, { sort: 'name' })
//=> '/posts/guides?sort=name'
```


### Server-Side Rendering

Router can be used in Node environment without `window` and `location`.
Expand Down

0 comments on commit 75ae2bf

Please sign in to comment.