@engineerapart/stencil-router

Stencil Router

Stats

StarsIssuesVersionUpdatedCreatedSize
@engineerapart/stencil-router
0.1.513 years ago3 years agoMinified + gzip package size for @engineerapart/stencil-router in KB

Readme

npm

Stencil Router

A simple router, inspired by React Router v4, for Stencil apps and vanilla Web Component apps.

<stencil-router>
    <RouterSwitch>
        <stencil-route url="/" component="landing-page" exact={true} />
        <stencil-route url="/demos" component="demos-page" />
        <stencil-route url="/other" component="other-page" />
        <stencil-route component="page-not-found" />
    </RouterSwitch>
</stencil-router>

Included components

  • stencil-router

    You should have one single stencil-router component in your project. This component controls all interactions with the browser history and it aggregates updates through an event system.

  • stencil-route

    This component renders based on whether the supplied url matches the current location.

    properties:

    • url (string): the pathname to match on. Accepts paths similar to expressjs. So that you can define parameters in the url /foo/:bar where bar would be available in incoming props.
    • component (string): the component name that you would like the route to render
    • componentProps (key/value Object): a key value object({ 'red': true, 'blue': 'white'}) containing props that should be passed to the defined component when rendered.
    • routeRender (function): function that accepts props as an argument. If this exists it will be used in place of the component defined.
    • exact (boolean): If true then only render this route when the url matches exactly to the location, if false it will render if the current url 'matches' the url defined.
  • stencil-route-link

    This component is used to render links to defined routes. It applys a specific style based on whether the link matches the current location.

    properties:

    • url (string): the pathname to link to.
    • exact (boolean): If true then only apply the active class when the url matches exactly to the location.
    • activeClass (string): The class to apply if the link matches the current location. This defaults to 'link-active'.
  • stencil-route-redirect

    This component redirects the current location.

    properties:

    • url (string): the url to redirect to.

Note: for apps using Ionic, we recommend using the Ionic navigation system and router for more native-style navigation.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.