URL

As a convenience, Joystick includes a url object globally available on the component instance. This object helps you access and work with the current route, URL parameters, and query string.

Example Usage

import joystick from '@joystick.js/ui';

const Navigation = joystick.component({
  render: ({ url }) => {
    return `
      <nav>
        <ul>
          <li class="${url.is_active('/') ? 'is-active' : ''}"><a href="/">Home</a></li>
          <li class="${url.is_active('/books') ? 'is-active' : ''}"><a href="/books">Books</a></li>
          <li class="${url.is_active('/movies') ? 'is-active' : ''}"><a href="/movies">Movies</a></li>
          <li class="${url.is_active('/games') ? 'is-active' : ''}"><a href="/games">Games</a></li>
        </ul>
      </nav>
    `;
  },
});

export default Navigation;

In the example above, we use url.is_active() to check if the current route matches a given path. If it does, we apply the is-active CSS class to the matching navigation item.

API

Definition

url: {
  is_active: (url: string) => boolean;
  params: object;
  path: string;
  query: object;
  route: string;
}

Parameters

is_active function

Tests whether the passed URL string matches the currently active URL. Returns a boolean.

params object

Route parameters extracted from the current matching route. For example, in /books/:category, you'd access the category param via params.category.

path string

The current URL path (e.g., /books/fiction).

query object

The query string parameters from the current URL. For example, on /books?sort=asc, you'd access query.sort.

route string

The matching route pattern for the current path (e.g., /books/:category if the current path is /books/fiction).