{"id":14990282,"url":"https://github.com/pionjs/pion","last_synced_at":"2026-05-12T10:02:06.911Z","repository":{"id":204813113,"uuid":"694051018","full_name":"pionjs/pion","owner":"pionjs","description":"React's Hooks API implemented for web components","archived":false,"fork":false,"pushed_at":"2025-05-07T10:41:16.000Z","size":2050,"stargazers_count":8,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-05T06:08:17.949Z","etag":null,"topics":["hooks","lit-html","react-hooks","web-component","web-components"],"latest_commit_sha":null,"homepage":"https://pionjs.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"matthewp/haunted","license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pionjs.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":"2023-09-20T08:28:50.000Z","updated_at":"2025-05-07T10:38:56.000Z","dependencies_parsed_at":"2024-01-13T11:30:28.948Z","dependency_job_id":"868c01e8-971b-4a6c-9184-12b15a05c981","html_url":"https://github.com/pionjs/pion","commit_stats":{"total_commits":291,"total_committers":42,"mean_commits":6.928571428571429,"dds":0.6254295532646048,"last_synced_commit":"a4318f98b8abef42c1d5ed0bb8ed690a1d70e2cd"},"previous_names":["pionjs/pion"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/pionjs/pion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pionjs%2Fpion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pionjs%2Fpion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pionjs%2Fpion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pionjs%2Fpion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pionjs","download_url":"https://codeload.github.com/pionjs/pion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pionjs%2Fpion/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268171000,"owners_count":24207406,"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","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-component","web-components"],"created_at":"2024-09-24T14:19:49.320Z","updated_at":"2025-10-03T20:43:00.574Z","avatar_url":"https://github.com/pionjs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pion\n\n[![npm](https://img.shields.io/npm/dt/@pionjs/pion)](https://npm.im/@pionjs/pion)\n[![npm](https://img.shields.io/npm/v/@pionjs/pion)](https://npm.im/@pionjs/pion)\n![coverage](https://api.codelyze.com/v1/projects/badge/clb_880e4a45e784d25b8115b2111d5cf157?r=1)\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).\nForked from [haunted](https://github.com/matthewp/haunted).\n\n📚 [Read the Docs](https://pionjs.com) 📖\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/@pionjs/pion';\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\npion 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 pion supports the following hooks:\n\n- [useCallback](https://pionjs.com/docs/hooks/useCallback/)\n- [useContext](https://pionjs.com/docs/hooks/useContext/)\n- [useEffect](https://pionjs.com/docs/hooks/useEffect/)\n- [useLayoutEffect](https://pionjs.com/docs/hooks/useLayoutEffect/)\n- [useMemo](https://pionjs.com/docs/hooks/useMemo/)\n- [useReducer](https://pionjs.com/docs/hooks/useReducer/)\n- [useRef](https://pionjs.com/docs/hooks/useRef/)\n- [useState](https://pionjs.com/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%2Fpionjs%2Fpion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpionjs%2Fpion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpionjs%2Fpion/lists"}