https://github.com/geocine/web-components-hooks-demo

web components hooks demo
https://github.com/geocine/web-components-hooks-demo

context-api css-in-js hacktoberfest hooks parceljs routing web-components

Last synced: about 2 months ago
JSON representation

web components hooks demo

• Host: GitHub
• URL: https://github.com/geocine/web-components-hooks-demo
• Owner: geocine
• Created: 2019-03-08T12:47:33.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-08-25T07:43:39.000Z (over 2 years ago)
• Last Synced: 2024-10-17T16:17:53.429Z (2 months ago)
• Topics: context-api, css-in-js, hacktoberfest, hooks, parceljs, routing, web-components
• Language: JavaScript
• Homepage: https://web-components-hooks.netlify.app/
• Size: 75.2 KB
• Stars: 18
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Web Components + Hooks Demo

This demonstrates a basic shopping cart built using Web Components. It also has State Management, Routing, CSS-in-JS and *does not need a build step*.






 



Technologies used:

- Web Components through [lit-html](https://github.com/Polymer/lit-html)

- Hooks through [haunted](https://github.com/matthewp/haunted)

- Context API through [haunted](https://github.com/matthewp/haunted)

- Routing through [navigo](https://github.com/krasimir/navigo)

- CSS-in-JS through [goober](https://github.com/cristianbote/goober)

### Usage

This [demo](https://web-components-hooks.netlify.com/) runs without a build step. 

### Development

Just run on a webserver with `index.html` as a fallback page. I suggest using [lite-server](https://github.com/johnpapa/lite-server) on root directory. The `yarn start` script uses `lite-server`.

```sh

yarn

yarn start

```

If you are serving this on a different `host:port` make sure to replace all instances of 

```

http://localhost:3000

```