{"id":13801154,"url":"https://github.com/weavejester/brutha","last_synced_at":"2025-05-13T11:30:52.639Z","repository":{"id":31026716,"uuid":"34585260","full_name":"weavejester/brutha","owner":"weavejester","description":"Simple ClojureScript interface to React","archived":false,"fork":false,"pushed_at":"2016-08-19T22:28:03.000Z","size":43,"stargazers_count":139,"open_issues_count":1,"forks_count":2,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-21T09:52:51.191Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/weavejester.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-25T20:38:59.000Z","updated_at":"2023-08-07T06:25:33.000Z","dependencies_parsed_at":"2022-08-24T12:10:25.408Z","dependency_job_id":null,"html_url":"https://github.com/weavejester/brutha","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weavejester%2Fbrutha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weavejester%2Fbrutha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weavejester%2Fbrutha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weavejester%2Fbrutha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weavejester","download_url":"https://codeload.github.com/weavejester/brutha/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253932772,"owners_count":21986445,"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":[],"created_at":"2024-08-04T00:01:20.086Z","updated_at":"2025-05-13T11:30:52.096Z","avatar_url":"https://github.com/weavejester.png","language":"Clojure","funding_links":[],"categories":["Awesome ClojureScript"],"sub_categories":["[React.js](https://facebook.github.io/react/) Interface"],"readme":"# Brutha\n\nA simple and functional ClojureScript interface to [React][].\n\n[react]: https://facebook.github.io/react/\n\n## Rationale\n\nUnlike [Om][] and [Reagent][], Brutha is unopinionated on how you\nhandle your application state. It doesn't include cursors or\nspecialized atoms, instead relying on you to call a `mount` function\nwith new state data. This is useful when you want to manage your\napplication state yourself.\n\n[om]: https://github.com/omcljs/om\n[reagent]: https://github.com/reagent-project/reagent\n\n## Installation\n\nAdd the following to your project `:dependencies`:\n\n    [brutha \"0.2.1\"]\n\n## Usage\n\nBrutha doesn't include a `dom` namespace like Om, so you'll need to\nuse a library like [Flupot][], [Sablono][] or [Kioo][]. In the\nexamples we'll use Flupot.\n\n[flupot]: https://github.com/weavejester/flupot\n[sablono]: https://github.com/r0man/sablono\n[kioo]: https://github.com/ckirkendall/kioo\n\nFirst we'll require Brutha and Flupot:\n\n```clojure\n(ns brutha.example\n  (:require [brutha.core :as br]\n            [flupot.dom :as dom]))\n```\n\nYou can use the `brutha.core/mount` function to attach a React element\nto a DOM node.\n\n```clojure\n(def app (js/document.getElementById \"app\"))\n\n(br/mount (dom/p \"Hello World\") app)\n```\n\nWhen you want to update, just call the `mount` function again. React\nwill efficiently work out what needs to be changed and update only\nthose elements.\n\n```clojure\n(br/mount (dom/p \"Goodbye World\") app)\n```\n\nIf you want to remove the associated component from a DOM node, use\nthe `brutha.core/unmount` function:\n\n```clojure\n(br/unmount app)\n```\n\nA Brutha component is a pure function that takes in an immutable data\nstructure, and returns a React element. The most straightforward way\nto write a component is to pass a function to `brutha.core/component`:\n\n```clojure\n(def unixtime\n  (br/component (fn [date] (dom/p (str (.getTime date))))))\n\n(br/mount (unixtime (js/Date.)) app)\n```\n\nBy wrapping the function in a component, React knows only to update\nthe DOM when the value passed to the function changes.\n\nFor debugging purposes, particularly when working with\n[React Developer Tools][devtools], it often helps to give a component\na display name by passing an extra argument when creating the\ncomponent.\n\n```clojure\n(def unixtime\n  (br/component 'UnixTime (fn [date] (dom/p (str (.getTime date))))))\n```\n\n[devtools]: https://github.com/facebook/react-devtools\n\nWhen using the same component multiple times with a collection of\ndata, it's important to give React a key to identify the\ncomponent. You can do this by passing a `:key` option to the\ncomponent:\n\n```clojure\n(foo-component data {:key (:id data)})\n```\n\nSometimes it's useful to know when a component is mounted onto the\nDOM. Brutha supports this too. Instead of supplying a function to\n`component`, you can supply a reified type:\n\n```clojure\n(def noisy-component\n  (br/component\n   (reify\n     br/IShouldUpdate\n     (should-update? [_ a b]\n       (not= a b))\n\n     br/IWillMount\n     (will-mount [_ value]\n       (js/console.log \"will-mount\"))\n\n     br/IDidMount\n     (did-mount [_ value dom-node]\n       (js/console.log \"did-mount\"))\n\n     br/IWillUpdate\n     (will-update [_ value next-value dom-node]\n       (js/console.log \"will-update\"))\n\n     br/IDidUpdate\n     (did-update [_ value prev-value dom-node]\n       (js/console.log \"did-update\"))\n\n     br/IWillUnmount\n     (will-unmount [_ value dom-node]\n       (js/console.log \"will-unmount\"))\n\n     br/IRender\n     (render [_ value]\n       (dom/p \"Hello World\")))))\n```\n\nA component is mounted once, and updated many times. The update\nmethods will not be called on the initial render.\n\n\n## License\n\nCopyright © 2016 James Reeves\n\nDistributed under the Eclipse Public License either version 1.0 or (at\nyour option) any later version.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweavejester%2Fbrutha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweavejester%2Fbrutha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweavejester%2Fbrutha/lists"}