Skip to content

Commit

Permalink
LV: Update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
loganvolkers committed Jan 12, 2021
1 parent 025e94e commit ce0a1d0
Showing 1 changed file with 24 additions and 2 deletions.
26 changes: 24 additions & 2 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# Stencil Hooks

Let's you use React-style hooks in your [Stencil](https://stenciljs.com/) components. Based on [haunted](https://github.com/matthewp/haunted/).


### Getting Started

Prefered distribution is via NPM,

```
npm i @saasquatch/stencil-hooks
```

To use the library you need to call `withHooks` in the constructor of your component, and then you can use hooks inside of your `render` function.

```js
import { withHooks, useState } from '@saasquatch/stencil-hooks';

Expand All @@ -29,3 +38,16 @@ export class Counter {
}
}
```

See it in action on the [live demo](https://webcomponents.dev/edit/gqVMwvd4PFqN3isJPt2h).


### FAQ

- **Shouldn't I just use Stencil state?** Yes, for simple cases you should. But for more complex state use cases hooks help make your state logic more modular, testable and shareable. The core stencil team has acknowledged that internal component state is not enough, and added libraries such as `stencil-store` and `stencil-redux` and `stencil-state-tunnel`. `stencil-hooks` uses the same `forceUpdate` from `@stencil/core` that is used by [stencil-store](https://github.com/ionic-team/stencil-store/blob/master/src/subscriptions/stencil.ts#L44).
- **Why not X state library?** The SaaSquatch team is used to thinking about state problems in hooks, so it's good for us. In some cases Redux or MobX or even Backbone might be a better solution.
- **Does this library actually work?** This library has a large set of tests across most of the hooks in haunted and is used in production at SaaSquatch.

### Differences from Haunted

This library re-exports most of haunted, but swaps out the `Context` implementation with [dom-context](https://github.com/saasquatch/dom-context).

0 comments on commit ce0a1d0

Please sign in to comment.