https://github.com/Seanmclem/router-elements

Native Web Component SPA Router
https://github.com/Seanmclem/router-elements

Last synced: 16 days ago
JSON representation

Native Web Component SPA Router

• Host: GitHub
• URL: https://github.com/Seanmclem/router-elements
• Owner: Seanmclem
• License: mit
• Created: 2019-06-11T17:29:02.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-06-19T17:08:41.000Z (over 5 years ago)
• Last Synced: 2024-09-21T13:53:32.606Z (about 2 months ago)
• Language: JavaScript
• Size: 85.9 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# Native Web Component SPA Router

A collection of Web Components for providing SPA routing functionality to a plain old vanilla JS project. The syntax for how the Custom Elements are used was originally inspired by how React Router is used. 

## Getting Started

You should be using a component-based vanilla JS. I have a boiler-plate project [here](https://github.com/Seanmclem/Web-Component-Dev-Environment) which already uses the npm module and provides an example of its implementation. 

## Installing

From within your project folder in which you wish to use the router-elements run:

```

npm install routerelements

```

## Using the router

Much of this assumes you are using some text-based html to define certain areas of your project. Using only JS to create all HTML elements is not yet supported for router-elements.

First thing after installing with `npm install` is to import. At some high level part of your web app you should add:

```

import  'routerelements';

```

Then you can add `router-component` to your markup.

```

```

This element serves multiple purposes. Firstly, it is the `router-outlet`, meaning when a route is eventually rendered -it renders inside of the `` element tags. 

Also, all of the routes are designated inside of this tag. It's contents should be written as a list of `route-define` tags. Each of which function primarily to designate a route and a component to render when hitting that route. All of these routes are registered with the router when the web app starts.

Example:

```

```

The `route` attribute designates the path that triggers this route.

The `component` attribute specifies which component is rendered when it's corresponding route is hit. 

The route should be in *lower-hyphen-case* and match the name of the Custom Element registered for your component. Although, the router is able to accept CamelCase so long as the casing more or less matches the hyphens. hyphen-case would still be preferred.

### Using your routes

A `` element would be used to create a link on your page that would navigate to your designated route and component. 

The `path` attribute is used to designate a url that clicking will navigate you to.

Example:

```

	Home

```

This generates an `` anchor tag that will use an `href` attribute containing your path. The inside of your `route-link` will go inside the `` tag. When you click -the default behavior will be prevented, and instead an event will be passed to your router component to handle the route.

## Contributing

Feel free to fork, make edits, submit pull requests, or create issues. 

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details