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
- License: isc
- Created: 2019-03-08T12:47:33.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-15T08:08:55.000Z (about 2 months ago)
- Last Synced: 2025-03-15T08:18:41.300Z (about 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: 80.1 KB
- Stars: 18
- Watchers: 1
- 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
```