piral-breadcrumbs
    TypeScript icon, indicating that this package has built-in type declarations

    0.14.9 • Public • Published

    Piral Logo

    Piral Breadcrumbs · GitHub License npm version tested with jest Gitter Chat

    This is plugin that only has a peer dependency to piral-core. What piral-breadcrumbs brings to the table is a set of Pilet API extensions that can be used with piral or piral-core.

    Why and When

    Many applications use breadcrumbs, which are UI indicators of the current page and its place in the page hierachy. Breadcrumbs easily allow going upwards to the root page in hierachy. The problem in a distributed system is that the relation between the pages is not centrally managed nor can it reliably be inferred.

    piral-breadcrumbs solves this problem by introducing the possibility of registering breadcrumb information stating how the breadcrumb should appear and where to place it in the hierachy. The hierachy is loosely coupled and resilient. Missing parent links are skipped to still come up with a consistent view.

    Alternatives: Get the registered pages and come up with a set of conventions and rules to build the breadcrumbs dynamically without requiring explicit registration.

    Video

    We also have a video for this plugin:

    @youtube

    Documentation

    The following functions are brought to the Pilet API.

    registerBreadcrumb()

    Adds the definition of a breadcrumb to the app shell. Specifies display characteristics like the title, URL, or parent breadcrumb.

    If the first argument is a string a named breadcrumb is registered. A named breadcrumb can also be removed.

    unregisterBreadcrumb()

    Removes a breadcrumb from the app shell. This requires a named breadcrumb.

    Usage

    ::: summary: For pilet authors

    You can use the registerBreadcrumb function from the Pilet API to add a new breadcrumb in the app shell.

    Note: When the first argument is a string we call it a named breadcrumb.

    Example use:

    import { PiletApi } from '<name-of-piral-instance>';
    
    export function setup(piral: PiletApi) {
      piral.registerBreadcrumb({
        title: 'Example',
        path: '/example',
      });
    }

    You can use the unregisterBreadcrumb function from the Pilet API to remove a previously added breadcrumb from the app shell.

    Note: You'll need to have added a named breadcrumb in order to be able to remove it.

    Example use:

    import { PiletApi } from '<name-of-piral-instance>';
    
    export function setup(piral: PiletApi) {
      // first register a named breadcrumb
      piral.registerBreadcrumb('bc-id', {
        title: 'Example',
        path: '/example',
      });
      // and unregister; maybe some time later?
      piral.unregisterBreadcrumb('bc-id');
    }

    :::

    ::: summary: For Piral instance developers

    The provided library only brings API extensions for pilets to a Piral instance.

    For the setup of the library itself you'll need to import createBreadcrumbsApi from the piral-breadcrumbs package.

    import { createBreadcrumbsApi } from 'piral-breadcrumbs';

    The integration looks like:

    const instance = createInstance({
      // important part
      plugins: [createBreadcrumbsApi()],
      // ...
    });

    Via the options the initially available breadcrumbs can be defined.

    Consider for example:

    const instance = createInstance({
      // important part
      plugins: [createBreadcrumbsApi({
        breadcrumbs: [
          {
            path: '/example',
            title: 'Example',
          },
          {
            path: '/example/foo',
            title: 'Foo',
            parent: '/example',
          },
        ]
      })],
      // ...
    });

    Customizing

    You can customize the breadcrumbs settings.

    import type {} from 'piral-breadcrumbs';
    
    declare module 'piral-breadcrumbs/lib/types' {
      interface PiralCustomBreadcrumbSettings {
        category?: string;
      }
    }
    
    // now registerBreadcrumb({ category: 'general' }) is strongly typed in pilets

    :::

    License

    Piral is released using the MIT license. For more information see the license file.

    Install

    npm i piral-breadcrumbs

    Homepage

    piral.io

    DownloadsWeekly Downloads

    428

    Version

    0.14.9

    License

    MIT

    Unpacked Size

    63.7 kB

    Total Files

    63

    Last publish

    Collaborators

    • florianrappl