FRANXX

Install

yarn add franxx

Usage

import { createBrowserRouter, createHashRouter, createMemoryRouter } from 'franxx'

// Router using HTML5 history API
// Widely supported (IE 10 and above)
const router = createBrowserRouter()
// Router using location.hash
// Useful for environments like Electron 
// Where you can't use history API
const router = createHashRouter()
// Router using memory
// Mainly for server-side or mobile apps
const router = createMemoryRouter()

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

You can also load franxx from JSDelivr or UNPKG:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/franxx.umd.min.js"></script>

<script>
const router = franxx.createBrowserRouter()
</script>

API

https://franxx.egoist.sh

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