{"id":39832514,"url":"https://github.com/collegevine/purescript-elmish-hooks","last_synced_at":"2026-01-18T13:15:50.855Z","repository":{"id":37898314,"uuid":"434639995","full_name":"collegevine/purescript-elmish-hooks","owner":"collegevine","description":"React hooks for Elmish","archived":false,"fork":false,"pushed_at":"2025-10-03T12:33:17.000Z","size":1564,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-10-03T14:39:51.942Z","etag":null,"topics":["hooks","purescript","react"],"latest_commit_sha":null,"homepage":"https://collegevine.github.io/purescript-elmish-hooks","language":"PureScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/collegevine.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-12-03T15:15:43.000Z","updated_at":"2025-10-03T12:33:04.000Z","dependencies_parsed_at":"2023-12-03T00:26:55.182Z","dependency_job_id":"4d6f7dde-0832-41cd-ab62-5a97b84af660","html_url":"https://github.com/collegevine/purescript-elmish-hooks","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/collegevine/purescript-elmish-hooks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collegevine%2Fpurescript-elmish-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collegevine%2Fpurescript-elmish-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collegevine%2Fpurescript-elmish-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collegevine%2Fpurescript-elmish-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/collegevine","download_url":"https://codeload.github.com/collegevine/purescript-elmish-hooks/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collegevine%2Fpurescript-elmish-hooks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28536751,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T13:04:05.990Z","status":"ssl_error","status_checked_at":"2026-01-18T13:01:44.092Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","purescript","react"],"created_at":"2026-01-18T13:15:50.706Z","updated_at":"2026-01-18T13:15:50.818Z","avatar_url":"https://github.com/collegevine.png","language":"PureScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# purescript-elmish-hooks\n\nThis library offers an analog of [React Hooks](https://reactjs.org/docs/hooks-intro.html) for use with [PureScript Elmish](https://github.com/collegevine/purescript-elmish).\n\n### Getting Started\n\nTo use this library, install `elmish-hooks`, as well as the npm package [stacktrace-parser](https://github.com/errwischt/stacktrace-parser).\n\n```\nnpx spago install elmish-hooks\nnpm install stacktrace-parser --save\n```\n\n### Hooks\n\nHooks allow introducing local state or effects without writing a new `ComponentDef`. This library comes with three builtin hooks: `useState`, `useEffect`, and `useRef`. Here’s what hooks look like in practice:\n\n```purs\ntodos :: ReactElement\ntodos = Hooks.component Hooks.do\n  todos /\\ setTodos \u003c- useState []\n\n  useEffect do\n    todos \u003c- API.fetchTodos\n    liftEffect $ setTodos todos\n\n  Hooks.pure $\n    H.fragment $ todoView \u003c$\u003e todos\n```\n\n### Custom Hooks\n\nCustom hooks can also be created. One way is to build on other hooks using the `Hook` monad:\n\n```purs\ntype UseLocalStorage t = UseState String \u003c\u003e UseEffect Unit \u003c\u003e t\n\nuseLocalStorage :: String -\u003e String -\u003e Hook UseLocalStorage (String /\\ Dispatch String)\nuseLocalStorage key defaultValue = Hooks.do\n  state /\\ setState \u003c- useState defaultValue\n\n  useEffect $ liftEffect do\n    window \u003e\u003e= localStorage \u003e\u003e= getItem key \u003e\u003e= case _ of\n      Just v -\u003e setState v\n      Nothing -\u003e setItem key defaultValue =\u003c\u003c localStorage =\u003c\u003c window\n\n  Hooks.pure $ state /\\ \\v -\u003e do\n    setState v\n    setItem key v =\u003c\u003c localStorage =\u003c\u003c window\n```\n\nA more flexible approach, when that doesn’t work, is to use the `mkHook` function provided by this library:\n\n```purs\nforeign import data :: UseMousePosition :: HookType\n\nuseMousePosition :: String -\u003e Hook UseMousePosition (Maybe { x :: Number, y :: Number })\nuseMousePosition className =\n  mkHook (ComponentName \"UseMousePosition\") \\render -\u003e\n    { init: pure Nothing\n    , update: \\_ pos -\u003e pure pos\n    , view: \\pos dispatch -\u003e\n        H.div_ className\n          { onMouseMove: E.handleEffect \\(E.MouseEvent event) -\u003e do\n              { top, left, width, height } \u003c- getBoundingClientRect event.currentTarget\n              let\n                x = event.clientX - left\n                y = event.clientY - top\n                mouseLeft = x \u003c 0.0 || y \u003c 0.0 || y \u003e height || x \u003e width\n              dispatch if mouseLeft then Nothing else Just { x, y }\n          , onMouseLeave: dispatch \u003c| const Nothing\n          } $\n          render pos\n    }\n```\n\n### Continuation-Passing Style\n\nIf you’re only using a single hook, sometimes it might be more concise to use CPS via the `==\u003e` or `=/\u003e` operators.\n\n```purs\nmyInput :: ReactElement\nmyInput = useState \"\" =/\u003e \\name setName -\u003e\n  H.input_ \"\" { value: name, onChange: setName \u003c| E.inputText }\n```\n\n### Examples\n\nThere are some examples in the [examples](https://github.com/collegevine/purescript-elmish-hooks/tree/main/examples) folder, which can be seen live [here](https://collegevine.github.io/purescript-elmish-hooks).\n\n### Documentation\n\nDocumentation is [published on Pursuit](https://pursuit.purescript.org/packages/purescript-elmish-hooks).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcollegevine%2Fpurescript-elmish-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcollegevine%2Fpurescript-elmish-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcollegevine%2Fpurescript-elmish-hooks/lists"}