FRANXX

Install

npm i franxx history

Usage

import { createRouter } from 'franxx'
import { createBrowserHistory } from 'history'

const router = createRouter({
  history: createBrowserHistory(),
})

router.add('/', () => {
  console.log('homepage')
})

router.add('/user/:name', ({ params, query }) => {
  console.log(params.name)
})

// The router by default automatically runs route handler
// When URL changes
// But for initial render
// You need to call this:
router.run()

// Go to another page
router.push('/user/egoist?from=NASA#profile')
// Or let us normalize the path for you
router.push({
  pathname: '/user/egoist',
  query: { from: 'NASA' },
  hash: '#profile',
})

Supported path patterns:

• Static (/foo, /foo/bar)
• Parameter (/:title, /books/:title, /books/:genre/:title)
• Parameter w/ Suffix (/movies/:title.mp4, /movies/:title.(mp4|mov))
• Optional Parameters (/:title?, /books/:title?, /books/:genre/:title?)
• Wildcards (*, /books/*, /books/:genre/*)

Note that the order you add routes matters, dynamic routes should always go last, i.e. add /about before adding *. We will address this issue in a future version.

CDN

Load it as an ES module from CDN:

<script type="module">
  import { createRouter } from 'https://cdn.jsdelivr.net/npm/franxx/dist/index.mjs'
</script>

API

https://paka.dev/npm/franxx

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

franxx © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

github.com/egoist · GitHub @egoist · Twitter @_egoistlily