diff --git a/README.md b/README.md index e0910e8..d1aa340 100644 --- a/README.md +++ b/README.md @@ -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, @@ -51,24 +51,21 @@ export const Layout = () => { --- - Made in Evil Martians, product consulting for developer tools. + Made in Evil Martians, product consulting for developer tools. --- - ## 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: @@ -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' }) @@ -131,17 +127,19 @@ router.get() //=> { To use search query like `?a=1&b=2` in routes you need to set `search` option: ```js -createRouter({ - home: '/p/?page=home' -}, { - search: true -}) +createRouter( + { + home: '/p/?page=home' + }, + { + search: true + } +) ``` Router will work with `?search` part as a string. Parameters order will be critical. - ### Clicks Tracking By default, router and `?search` params store will add `click` event listener @@ -171,7 +169,6 @@ export const Link = (props) => { } ``` - ### URL Generation Using `getPagePath()` avoids hard coding URL in templates. It is better @@ -190,7 +187,7 @@ or `redirectPage`: ```ts import { openPage, redirectPage } from '@nanostores/router' -function requireLogin () { +function requireLogin() { openPage($router, 'login') } @@ -207,7 +204,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`.