{"id":13452052,"url":"https://github.com/matthewp/haunted","last_synced_at":"2025-05-13T15:10:36.810Z","repository":{"id":37444151,"uuid":"154988175","full_name":"matthewp/haunted","owner":"matthewp","description":"React's Hooks API implemented for web components 👻","archived":false,"fork":false,"pushed_at":"2025-04-22T06:19:25.000Z","size":4099,"stargazers_count":2648,"open_issues_count":62,"forks_count":92,"subscribers_count":33,"default_branch":"main","last_synced_at":"2025-04-23T18:58:21.001Z","etag":null,"topics":["hooks","lit-html","react-hooks","web-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matthewp.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-10-27T16:58:48.000Z","updated_at":"2025-04-23T12:02:34.000Z","dependencies_parsed_at":"2025-04-16T13:51:36.354Z","dependency_job_id":"f86cb407-926d-437b-8bf5-1715429b12a0","html_url":"https://github.com/matthewp/haunted","commit_stats":{"total_commits":231,"total_committers":40,"mean_commits":5.775,"dds":0.5281385281385281,"last_synced_commit":"7ac506fa77e1b5671a4e89ce864442fd429b2f26"},"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewp%2Fhaunted","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewp%2Fhaunted/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewp%2Fhaunted/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewp%2Fhaunted/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matthewp","download_url":"https://codeload.github.com/matthewp/haunted/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253969248,"owners_count":21992263,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","lit-html","react-hooks","web-components"],"created_at":"2024-07-31T07:01:11.346Z","updated_at":"2025-05-13T15:10:31.780Z","avatar_url":"https://github.com/matthewp.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Reactivity / State across multiple components (TC39 Signals)","JavaScript","Examples","Libraries"],"sub_categories":["Functional"],"readme":"# Haunted 🦇 🎃\n\n[![npm](https://img.shields.io/npm/dt/haunted)](https://npm.im/haunted)\n[![npm](https://img.shields.io/npm/v/haunted)](https://npm.im/haunted)\n\nReact'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).\n\n📚 [Read the Docs](https://hauntedhooks.netlify.app) 📖\n\n```html\n\u003chtml lang=\"en\"\u003e\n  \u003cmy-counter\u003e\u003c/my-counter\u003e\n\n  \u003cscript type=\"module\"\u003e\n    import { html } from 'https://unpkg.com/lit?module';\n    import { component, useState } from 'https://unpkg.com/haunted/haunted.js';\n\n    function Counter() {\n      const [count, setCount] = useState(0);\n\n      return html`\n        \u003cdiv id=\"count\"\u003e${count}\u003c/div\u003e\n        \u003cbutton type=\"button\" @click=${() =\u003e setCount(count + 1)}\u003e\n          Increment\n        \u003c/button\u003e\n      `;\n    }\n\n    customElements.define('my-counter', component(Counter));\n  \u003c/script\u003e\n\u003c/html\u003e\n```\n\nMore example integrations can be found in [this gist](https://gist.github.com/matthewp/92c4daa6588eaef484c6f389d20d5700).\n\n## Hooks\n\nHaunted 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.\n\nCurrently Haunted supports the following hooks:\n\n- [useCallback](https://hauntedhooks.netlify.app/docs/hooks/useCallback/)\n- [useContext](https://hauntedhooks.netlify.app/docs/hooks/useContext/)\n- [useController](https://hauntedhooks.netlify.app/docs/hooks/useController/)\n- [useEffect](https://hauntedhooks.netlify.app/docs/hooks/useEffect/)\n- [useLayoutEffect](https://hauntedhooks.netlify.app/docs/hooks/useLayoutEffect/)\n- [useMemo](https://hauntedhooks.netlify.app/docs/hooks/useMemo/)\n- [useReducer](https://hauntedhooks.netlify.app/docs/hooks/useReducer/)\n- [useRef](https://hauntedhooks.netlify.app/docs/hooks/useRef/)\n- [useState](https://hauntedhooks.netlify.app/docs/hooks/useState/)\n\n### Function Signatures\n\n```ts\n// Or another renderer, see Guides\ntype Renderer = (element: Element) =\u003e TemplateResult;\n\ninterface Options {\n  baseElement: HTMLElement;\n  observedAttributes: string[];\n  useShadowDOM: boolean\n}\n\ndeclare function component(\n  renderer: Renderer,\n  options: Options\n): Element;\n\ndeclare function component\u003cBaseElement = HTMLElement\u003e(\n  renderer: Renderer,\n  baseElement: BaseElement,\n  options: Options\n): Element\n\ndeclare function virtual(renderer: Renderer): Directive\n\n```\n\n## License\n\nBSD-2-Clause\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthewp%2Fhaunted","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatthewp%2Fhaunted","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthewp%2Fhaunted/lists"}