{"id":15010476,"url":"https://github.com/nosco/hx","last_synced_at":"2025-04-07T15:09:12.437Z","repository":{"id":41797336,"uuid":"136633406","full_name":"nosco/hx","owner":"nosco","description":"A simple, easy to use library for React development in ClojureScript.","archived":false,"fork":false,"pushed_at":"2023-11-06T12:45:18.000Z","size":669,"stargazers_count":248,"open_issues_count":16,"forks_count":16,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-24T09:53:41.099Z","etag":null,"topics":["clj","cljs","clojurescript","hiccup","hiccup-interpreter","react","react-components","react-hooks"],"latest_commit_sha":null,"homepage":"","language":"Clojure","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/nosco.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}},"created_at":"2018-06-08T15:02:28.000Z","updated_at":"2025-03-24T07:28:17.000Z","dependencies_parsed_at":"2024-05-01T15:27:27.480Z","dependency_job_id":"05f43e2c-ed2f-4c02-ba37-8b833d0a65d5","html_url":"https://github.com/nosco/hx","commit_stats":null,"previous_names":["lokeh/hx"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nosco%2Fhx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nosco%2Fhx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nosco%2Fhx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nosco%2Fhx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nosco","download_url":"https://codeload.github.com/nosco/hx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246465228,"owners_count":20781919,"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":["clj","cljs","clojurescript","hiccup","hiccup-interpreter","react","react-components","react-hooks"],"created_at":"2024-09-24T19:34:26.490Z","updated_at":"2025-03-31T12:09:45.082Z","avatar_url":"https://github.com/nosco.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hx\n\n[![Clojars Project](https://img.shields.io/clojars/v/lilactown/hx.svg)](https://clojars.org/lilactown/hx)\n\nA simple, easy to use library for React development in ClojureScript.\n\n## Update - Transfer of ownership\n\nThe [original author](https://github.com/lilactown) has kindly agreed to transfer ownership of this project to Nosco. We're using hx in production and don't expect any breaking changes, but we are fixing small issues and minor quality of life improvements as we find them. \n\nDevelopment from the [original author](https://github.com/lilactown) has moved to [helix](https://github.com/lilactown/helix). Helix is the latest version of hx, with some breaking changes (no hiccup parser, slightly different hooks API, and a focus on compile-time semantics).\n\n\n## Example\n\n\n```clojure\n(ns my-app.core\n  (:require [hx.react :as hx :refer [defnc]]\n            [hx.hooks :as hooks]\n            [\"react-dom\" :as react-dom]))\n\n;; `defnc` creates a function that takes a props object and returns React\n;; elements. You may use it just like any normal React component.\n(defnc MyComponent [{:keys [initial-name]}]\n  ;; use React Hooks for state management\n  (let [[name update-name] (hooks/useState initial-name)]\n    [:\u003c\u003e\n     [:div \"Hello \" \n      [:span {:style {:font-weight \"bold\"}} name] \"!\"]\n     [:div [:input {:on-change #(update-name (-\u003e % .-target .-value))}]]]))\n\n(react-dom/render\n  ;; hx/f transforms Hiccup into a React element.\n  ;; We only have to use it when we want to use hiccup outside of `defnc` / `defcomponent`\n  (hx/f [MyComponent {:initial-name \"React in CLJS\"}])\n  (. js/document getElementById \"app\"))\n```\n\n## Dependencies\n\nYou'll want to make sure you have the latest version of `react`, and whatever\nrenderer you are targeting (e.g. `react-dom`).\n\n```\nnpm i react react-dom\n```\n\nIf you want to use the React Hooks API (`hx.hooks`), you'll need to ensure\nyou are using React 16.8 or later.\n\n## What problems does `hx` solve?\n\n`hx` is meant to make it simple, easy and fun to use [React.js](https://reactjs.org/)\nwithin ClojureScript. It is your bridge to the wide world of React.js in \nidiomatic CLJS.\n\nThe library is split into (currently) three sections, which you can feel free to \nmix as your project sees fit:\n\n1. A hiccup interpreter. Takes in `[:div {:style {:color \"red\"}} [:span \"foo\"]]` and\nspits out `React.createElement` calls.\n\n2. Helpers for creating components. `defnc` and `defcomponent` help us write\nplain React.js components in idiomatic ClojureScript.\n\n3. Helpers for using React Hooks.\n\n## What problems does `hx` _not_ solve?\n\nNo opinionated state management, no custom rendering queue. Use it to build\nyour awesome opinionated async reactive immutable app framework. `hx` is just\na Clojure-y interface to creating plain, unadulterated React components.\n\n## Documentation\n\n - [Hiccup](./docs/hiccup.md)\n   - [What's hiccup?](./docs/hiccup.md#whats-hiccup)\n   - [Hiccup forms \u0026 interpreter behavior](./docs/hiccup.md#hiccup-forms--interpreter-behavior)\n - [Authoring Components](./docs/authoring-components.md)\n - [State management](./docs/state-management.md)\n   - [hx.hooks API](./docs/state-management.md#hxhooks)\n - [How-To](./docs/how-to.md)\n   - [Use higher-order components](./docs/how-to.md#Use-higher-order-components)\n   - [Use children-as-function / render-props](./docs/how-to.md#Use-children-as-function--render-props)\n - [API documentation](./docs/api.md)\n - [Why not Reagent?](./docs/why-not-reagent.md)\n \n## Examples\n\nInterop:\n\n - [Material UI](./examples/workshop/material.cljs)\n - [react-dnd](./examples/workshop/react_dnd.cljs)\n - [react-sortable-hoc](./examples/workshop/sortable.cljs)\n \n## Projects that use it\n\n - [punk](https://github.com/Lokeh/punk): A data REBL built for the web\n - [hx-frisk](https://github.com/Lokeh/hx-frisk/): A fork of [data-frisk-reagent](https://github.com/Odinodin/data-frisk-reagent)\n\n## License\n\nCopyright © 2018 Will Acton\n\nDistributed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnosco%2Fhx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnosco%2Fhx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnosco%2Fhx/lists"}