1.0.1 • Published 4 years ago

@stencil/router v1.0.1

Weekly downloads
6,657
License
MIT
Repository
github
Last release
4 years ago

npm

Stencil Router

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

<stencil-router>
  <stencil-route url="/" component="landing-page" exact={true}></stencil-route>
  <stencil-route url="/docs" component="docs-page"></stencil-route>
  <stencil-route url="/demos" component="demos-page"></stencil-route>
</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.

@socrate/lms-pluginsparkle-core-testarc-bt-stencil-pocreference-data-maintainreference-data-maintainencereference-data-maintainesreference-data-maintains@dhyanitest/coreevents-wiget-chartreading-level-reportsmartvideo@square33/cookie-opt-inojgenn-test@infinitebrahmanuniverse/nolb-_stentest-web-componentstest-web-componets@everything-registry/sub-chunk-872taavi-skepticweb-component-pokedexweb-components-trialworkflow-designer-kcworkflow-designer-kcv2xbank-wwwxhw-stencil-demotechwatchtest-stencil-publishthesis_jan_stencilvitalijdemo-stencilvloc-retailva-botuwe-dsvoth-components@crds_npm/crds-components@culturehacklabs/genki-reloaded@corejam/run@counterfactual/dapp-high-roller@counterfactual/playground@dev-engage/jumpstart-template@dev-engage/stencil-bootstrap@dev-engage/universal-core@benjamin.tanguay/ticksmith-namejinceilkarapincha-componentsjinneejavglex-stencil-testjbradarionic-image-viewerinput-characters-countip-stencil-route-listenerlumavate-toolbarluma-ionstx-abtestst-handsontablest-lookout-forst-qrstage-internal-searchstage-ts-searchstencil-ionic-budget-and-walletstencil-demo-route-teststencil-auth-componentstencil-bootrapstencil-bootrap-teststencil-bootstrap-componentsstencil-bs-libstencil-bs-ui-libstencil-rkc-project-teststencil-pocstereo-scope-componentstenciljs-componentsstencilstarterstencil-test-davidstencil-test-mjsstencil-wenbostefans-awesome-stencil-appuacpcomponentstun-settings-hubtun-stencil-sampleuic-jstus-bocatasth-caloriecountertrianz-onlinetraining@alex-roman/oli@bkulzick/starter@boaterbase/bb-components@bubbleup/stencil-starter-componentys360-olimpicozerbuszerbus-pwaviiv-stencil-repounity-ambient-xts-searchts-search-slim-viewts-search-stencilts-search-stencil-ngve-webcomponentsvecomponenthub@ibex/core@fireenjin/docs@flarehr/benefits-app@flarehr/apollo-super-selection
2.0.0-2

4 years ago

2.0.0-1

5 years ago

2.0.0-0

5 years ago

1.0.1

6 years ago

1.0.0

6 years ago

1.0.0-1

6 years ago

1.0.0-0

6 years ago

0.3.4-2

6 years ago

0.3.4-1

6 years ago

0.3.4-0

6 years ago

0.3.3-1

6 years ago

0.3.3-0

6 years ago

0.3.3

6 years ago

0.3.2

6 years ago

0.3.1

7 years ago

0.3.0

7 years ago

0.2.8

7 years ago

0.2.7

7 years ago

0.2.7-5

7 years ago

0.2.7-4

7 years ago

0.2.7-3

7 years ago

0.2.7-2

7 years ago

0.2.7-1

7 years ago

0.2.7-0

7 years ago

0.2.6

7 years ago

0.2.6-2

7 years ago

0.2.6-1

7 years ago

0.2.6-0

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.2-2

7 years ago

0.2.2-1

7 years ago

0.2.2-0

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.7

7 years ago

0.1.6

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.3-1

7 years ago

0.1.3-0

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.29-12

7 years ago

0.0.29-11

7 years ago

0.0.29-10

7 years ago

0.0.29-9

7 years ago

0.0.29-8

7 years ago

0.0.29-7

7 years ago

0.0.29-6

7 years ago

0.0.29-5

7 years ago

0.0.29-4

7 years ago

0.0.29-3

7 years ago

0.0.29-2

7 years ago

0.0.29-1

7 years ago

0.0.29-0

7 years ago

0.0.28

7 years ago

0.0.27

7 years ago

0.0.26

7 years ago

0.0.25

7 years ago

0.0.24

7 years ago

0.0.24-1

7 years ago

0.0.24-0

7 years ago

0.0.23

7 years ago

0.0.22

7 years ago

0.0.21

7 years ago

0.0.20

7 years ago

0.0.19

7 years ago

0.0.18

7 years ago

0.0.17

8 years ago

0.0.17-1

8 years ago

0.0.17-0

8 years ago

0.0.16

8 years ago

0.0.15

8 years ago

0.0.14

8 years ago

0.0.13

8 years ago

0.0.12

8 years ago

0.0.11

8 years ago

0.0.10

8 years ago

0.0.10-0

8 years ago

0.0.9

8 years ago

0.0.8

8 years ago

0.0.7

8 years ago

0.0.7-7

8 years ago

0.0.7-6

8 years ago

0.0.7-5

8 years ago

0.0.7-4

8 years ago

0.0.7-3

8 years ago

0.0.7-2

8 years ago

0.0.7-1

8 years ago

0.0.7-0

8 years ago

0.0.6

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago