@curi/interactions

v2.0.1

About

The @curi/interactions package provides a number of functions for interacting with Curi routes.

Installation

npm install @curi/interactions

UMD scripts script are also available through Unpkg. You can access the package's exports using window.CuriInteractions.

API

pathname

An interaction function to generate a pathname string for a route.

If the route requires an params, they should be provided as the second argument to the function call.

import { pathname } from "@curi/interactions";

let routes = prepareRoutes([
  {
    name: "Home",
    path: ""
  },
  {
    name: "User",
    path: "u/:id",
  }
]);

let route = router.route("Home");
let parent = pathname(route); // "/"

Arguments

route

The route to generate a pathname string for.

params

An object of params used to generate the pathname. If the route and/or any of its ancestor routes require params, then this argument must be provided.

let route = router.route("User");
let parent = pathname(route, { id: "1" }); // "/u/1"

active

An interaction function that uses a response object to determine if a route is "active".

The interaction requires two arguments, the first being the route data and the second being a response object.

import { active } from "@curi/interactions";

let routes = prepareRoutes([
  {
    name: "User",
    path: "u/:id",
  }
]);

let route = router.route("User");
let isActive = active(route, response, { id: "1" });

Arguments

route

The route to determine if it is active.

response

A response object emitted by the router.

let { response } = router.current();
active(route, response);

options

An object with additional options

active(route, response, options);

params

If the route requires params, these are the params that should be compared against the response's params.

partial

When true (defaults to false), a route that is an ancestor of the response's route can be considered active if its params match the response's params.

components

A function to compare the other location components (hash and query) against the response's location.

ancestors

An interaction function to get the ancestors of a route.

The interaction returns the public route data for each of the route's ancestors. The first item in the array is the root-most ancestor, while the last item in the array is the route's parent.

import { ancestors } from "@curi/interactions";

let routes = prepareRoutes([
  {
    name: "Grandparent", path: "g",
    children: [
      {
        name: "Parent", path: "p",
        children: [
          { name: "Child", path: "c" }
        ]
      }
    ]
  }
]);

let route = router.route("Child");
let family = ancestors(route);
// [
//   { meta: { name: "Grandparent", ... }, ... },
//   { meta: { name: "Parent", ... }, ... },
// ]

Arguments

route

The route to get the ancestors of.

prefetch

A function that will call a route's resolve method.


import { prefetch } from '@curi/interactions';

let route = router.route("Async Route");
prefetch(route).then(...);

Arguments

route

The route to prefetch.

optional

A route's resolve function is called with two arguments: the match object for the matched route and an externalvalue. You can provide filler values for these with the optional object argument.

let router = createRouter(browser, routes, {
  external
});

prefetch(route, {
  match: { params: {...} },
  external: router.external
});

match

An object of "match" properties for the resolve function. The possible properties are name, params, location, and partials.

external

Any external values passed to the resolve function.

To access the external values set on the router when it was created, you can use router.external.

let router = createRouter(browser, routes, {
  external: {...}
});

prefetch(
  route,
  { external: router.external }
);