{"id":14972233,"url":"https://github.com/gadfly361/baking-soda","last_synced_at":"2025-10-26T18:31:40.832Z","repository":{"id":57713204,"uuid":"87683509","full_name":"gadfly361/baking-soda","owner":"gadfly361","description":"baking-soda is an interface between clojurescript's reagent and reactstrap (i.e., bootstrap 4 react components) and react-bootstrap (i.e., bootstrap 3 react components)","archived":false,"fork":false,"pushed_at":"2018-05-16T13:55:37.000Z","size":14,"stargazers_count":74,"open_issues_count":0,"forks_count":7,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-01-16T15:13:17.694Z","etag":null,"topics":["boostrap4","bootstrap","bootstrap3","clojurescript","react","reagent"],"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/gadfly361.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-09T04:47:33.000Z","updated_at":"2021-09-08T04:11:22.000Z","dependencies_parsed_at":"2022-09-05T22:50:47.857Z","dependency_job_id":null,"html_url":"https://github.com/gadfly361/baking-soda","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadfly361%2Fbaking-soda","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadfly361%2Fbaking-soda/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadfly361%2Fbaking-soda/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadfly361%2Fbaking-soda/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gadfly361","download_url":"https://codeload.github.com/gadfly361/baking-soda/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236589581,"owners_count":19173430,"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":["boostrap4","bootstrap","bootstrap3","clojurescript","react","reagent"],"created_at":"2024-09-24T13:46:36.133Z","updated_at":"2025-10-26T18:31:40.571Z","avatar_url":"https://github.com/gadfly361.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"# baking-soda\n\nBaking-soda is an interface between\nclojurescript's [reagent](https://github.com/reagent-project/reagent)\nand [reactstrap](http://reactstrap.github.io/) (i.e., bootstrap 4 react components) or [react-bootstrap](https://react-bootstrap.github.io/) (i.e., bootstrap 3 react components).\n\n\n## Usage with [Reactstrap](http://reactstrap.github.io/) (bootstrap 4)\n\nAdd the following stylesheet to your *index.html*:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css\"\u003e\n```\n\nPut the following in the `:dependencies` vector of your *project.clj*.\n\n```clojure\n[baking-soda \"0.2.0\"]\n[reagent \"0.8.1\" :exclusions [cljsjs/react\n                              cljsjs/react-dom]]\n[cljsjs/react \"16.3.2-0\"]\n[cljsjs/react-dom \"16.3.2-0\"]\n[cljsjs/react-transition-group \"2.3.1-0\"]\n[cljsjs/react-popper \"0.10.4-0\"]\n```\n\n*Note: you need to use reagent 0.8+*\n\nThen require baking-soda in your namespace.\n\n```clojure\n(ns foo.bar\n  (:require [baking-soda.core :as b]))\n```\n\n### Example\n\nLet's take a look at a modal. In javascript, you'd write something like this:\n\n```jsx\n/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\n\nimport React from 'react';\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\n\nclass ModalExample extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      modal: false\n    };\n\n    this.toggle = this.toggle.bind(this);\n  }\n\n  toggle() {\n    this.setState({\n      modal: !this.state.modal\n    });\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cButton color=\"danger\" onClick={this.toggle}\u003e{this.props.buttonLabel}\u003c/Button\u003e\n        \u003cModal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}\u003e\n          \u003cModalHeader toggle={this.toggle}\u003eModal title\u003c/ModalHeader\u003e\n          \u003cModalBody\u003e\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n          \u003c/ModalBody\u003e\n          \u003cModalFooter\u003e\n            \u003cButton color=\"primary\" onClick={this.toggle}\u003eDo Something\u003c/Button\u003e{' '}\n            \u003cButton color=\"secondary\" onClick={this.toggle}\u003eCancel\u003c/Button\u003e\n          \u003c/ModalFooter\u003e\n        \u003c/Modal\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default ModalExample;\n```\n\nHowever, in clojurescript with baking-soda, you'd write something like this:\n\n```clojure\n(ns foo.bar\n  (:require\n   [reagent.core :as reagent]\n   [baking-soda.core :as b]))\n\n(defonce app-state\n  (reagent/atom {:show-modal? false}))\n  \n(defn toggle! [ratom]\n  (swap! ratom update :show-modal? not))\n\n(defn modal-example [ratom opts]\n  (let [{:keys [button-label\n                class]} opts\n        show-modal?     (get @ratom :show-modal? false)]\n    [:div\n     [b/Button {:color    \"danger\"\n                :on-click #(toggle! ratom)}\n      button-label]\n\n     [b/Modal {:is-open show-modal?\n               :toggle  #(toggle! ratom)\n               :class   class}\n      [b/ModalHeader\n       \"Modal title\"]\n\n      [b/ModalBody\n       \"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"]\n\n      [b/ModalFooter\n       [b/Button {:color    \"primary\"\n                  :on-click #(toggle! ratom)}\n        \"Do Something\"]\n       [b/Button {:color    \"secondary\"\n                  :on-click #(toggle! ratom)}\n        \"Cancel\"]]\n      ]\n     ]))\n\n(defn ^:export main []\n  (reagent/render [modal-example app-state {:button-label \"Click Me\"\n                                            :class        \"mymodal\"}]\n                  (.getElementById js/document \"app\")))\n```\n\n## Usage with [React-bootstrap](https://react-bootstrap.github.io/) (bootstrap 3)\n\nAdd the following stylesheet to your *index.html*:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\"\u003e\n```\n\nPut the following in the `:dependencies` vector of your *project.clj*\n\n```clojure\n[baking-soda \"0.2.0\"]\n[reagent \"0.7.0\"]\n```\n\n*Note: you need to use reagent 0.7*\n\nThen require baking-soda in your namespace.\n\n```clojure\n(ns foo.bar\n  (:require [baking-soda.bootstrap3 :as b3]))\n```\n\n### Example\n\nLet's take a look at a modal. In javascript, you'd write something like this:\n\n```jsx\nconst Example = React.createClass({\n  getInitialState() {\n    return { showModal: false };\n  },\n\n  close() {\n    this.setState({ showModal: false });\n  },\n\n  open() {\n    this.setState({ showModal: true });\n  },\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003eClick to get the full Modal experience!\u003c/p\u003e\n\n        \u003cButton\n          bsStyle=\"primary\"\n          bsSize=\"large\"\n          onClick={this.open}\n        \u003e\n          Launch demo modal\n        \u003c/Button\u003e\n\n        \u003cModal show={this.state.showModal} onHide={this.close}\u003e\n          \u003cModal.Header closeButton\u003e\n            \u003cModal.Title\u003eModal heading\u003c/Modal.Title\u003e\n          \u003c/Modal.Header\u003e\n          \u003cModal.Body\u003e\n            \u003ch4\u003eText in a modal\u003c/h4\u003e\n            \u003cp\u003eDuis mollis, est non commodo luctus, nisi erat porttitor ligula.\u003c/p\u003e\n          \u003c/Modal.Body\u003e\n          \u003cModal.Footer\u003e\n            \u003cButton onClick={this.close}\u003eClose\u003c/Button\u003e\n          \u003c/Modal.Footer\u003e\n        \u003c/Modal\u003e\n      \u003c/div\u003e\n    );\n  }\n});\n\nReactDOM.render(\u003cExample /\u003e, mountNode);\n```\n\nHowever, in clojurescript with baking-soda, you'd write something like this:\n\n```clojure\n(ns foo.bar\n  (:require\n   [reagent.core :as reagent]\n   [baking-soda.bootstrap3 :as b3]))\n   \n(defonce app-state\n  (reagent/atom {:show-modal? false}))\n\n(defn modal-open! [ratom]\n  (swap! ratom assoc :show-modal? true))\n\n(defn modal-close! [ratom]\n  (swap! ratom assoc :show-modal? false))\n\n(defn modal-example [ratom]\n  (let [show-modal? (get @ratom :show-modal? false)]\n    [:div\n     [:p \"Click to get the full Modal experience!\"]\n     [b3/Button {:bs-style \"primary\"\n                :bs-size  \"large\"\n                :on-click #(modal-open! ratom)}\n      \"Launch demo modal\"]\n\n     [b3/Modal {:show    show-modal?\n               :on-hide #(modal-close! ratom)}\n      [b3/ModalHeader {:close-button true}\n       [b3/ModalTitle\n        \"Modal Heading\"]]\n      [b3/ModalBody\n       [:h4 \"text in a modal\"]\n       [:p \"Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\"]]\n      [b3/ModalFooter\n       [b3/Button {:on-click #(modal-close! ratom)}\n        \"Close\"]]\n      ]]))\n\n(defn ^:export main []\n  (reagent/render [modal-example app-state]\n                  (.getElementById js/document \"app\")))\n```\n\n\n## Questions\n\nIf you have questions, I can usually be found hanging out in the\n[clojurians](http://clojurians.net/) #reagent slack channel (my handle\nis [@gadfly361](https://twitter.com/gadfly361)).\n\n# License\n\nCopyright © 2017 Matthew Jaoudi\n\nDistributed under the The MIT License (MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgadfly361%2Fbaking-soda","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgadfly361%2Fbaking-soda","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgadfly361%2Fbaking-soda/lists"}