Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matthewp/haunted
React's Hooks API implemented for web components 👻
https://github.com/matthewp/haunted
hooks lit-html react-hooks web-components
Last synced: 5 days ago
JSON representation
React's Hooks API implemented for web components 👻
- Host: GitHub
- URL: https://github.com/matthewp/haunted
- Owner: matthewp
- License: bsd-2-clause
- Created: 2018-10-27T16:58:48.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-10-22T12:47:11.000Z (3 months ago)
- Last Synced: 2025-01-14T06:05:22.348Z (12 days ago)
- Topics: hooks, lit-html, react-hooks, web-components
- Language: TypeScript
- Homepage:
- Size: 1.54 MB
- Stars: 2,622
- Watchers: 32
- Forks: 92
- Open Issues: 68
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - haunted - React's Hooks API implemented for web components 👻 (JavaScript)
- awesome-web-components - Haunted
- awesome-github-repos - matthewp/haunted - React's Hooks API implemented for web components 👻 (TypeScript)
- awesome-list - haunted
- awesome-react-hooks - Haunted - React's Hooks API implemented for web components. (Examples)
- awesome-web-components - haunted - React's Hooks API implemented for web components. (Libraries / Functional)
README
# Haunted 🦇 🎃
[](https://npm.im/haunted)
[](https://npm.im/haunted)
React's Hooks API but for standard web components and [lit-html](https://lit-html.polymer-project.org/) or [hyperHTML](https://codepen.io/WebReflection/pen/pxXrdy?editors=0010).
📚 [Read the Docs](https://hauntedhooks.netlify.app) 📖
```html
import { html } from 'https://unpkg.com/lit?module';
import { component, useState } from 'https://unpkg.com/haunted/haunted.js';
function Counter() {
const [count, setCount] = useState(0);
return html`
<div id="count">${count}</div>
<button type="button" @click=${() => setCount(count + 1)}>
Increment
</button>
`;
}
customElements.define('my-counter', component(Counter));
```
More example integrations can be found in [this gist](https://gist.github.com/matthewp/92c4daa6588eaef484c6f389d20d5700).
## Hooks
Haunted supports the same API as React Hooks. The hope is that by doing so you can reuse hooks available on npm simply by aliasing package names in your bundler's config.
Currently Haunted supports the following hooks:
- [useCallback](https://hauntedhooks.netlify.app/docs/hooks/useCallback/)
- [useContext](https://hauntedhooks.netlify.app/docs/hooks/useContext/)
- [useController](https://hauntedhooks.netlify.app/docs/hooks/useController/)
- [useEffect](https://hauntedhooks.netlify.app/docs/hooks/useEffect/)
- [useLayoutEffect](https://hauntedhooks.netlify.app/docs/hooks/useLayoutEffect/)
- [useMemo](https://hauntedhooks.netlify.app/docs/hooks/useMemo/)
- [useReducer](https://hauntedhooks.netlify.app/docs/hooks/useReducer/)
- [useRef](https://hauntedhooks.netlify.app/docs/hooks/useRef/)
- [useState](https://hauntedhooks.netlify.app/docs/hooks/useState/)
### Function Signatures
```ts
// Or another renderer, see Guides
type Renderer = (element: Element) => TemplateResult;
interface Options {
baseElement: HTMLElement;
observedAttributes: string[];
useShadowDOM: boolean
}
declare function component(
renderer: Renderer,
options: Options
): Element;
declare function component(
renderer: Renderer,
baseElement: BaseElement,
options: Options
): Element
declare function virtual(renderer: Renderer): Directive
```
## License
BSD-2-Clause