Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gadfly361/baking-soda
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)
https://github.com/gadfly361/baking-soda
boostrap4 bootstrap bootstrap3 clojurescript react reagent
Last synced: 3 months ago
JSON representation
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)
- Host: GitHub
- URL: https://github.com/gadfly361/baking-soda
- Owner: gadfly361
- License: mit
- Created: 2017-04-09T04:47:33.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-16T13:55:37.000Z (over 6 years ago)
- Last Synced: 2024-09-28T15:42:49.412Z (4 months ago)
- Topics: boostrap4, bootstrap, bootstrap3, clojurescript, react, reagent
- Language: Clojure
- Homepage:
- Size: 13.7 KB
- Stars: 74
- Watchers: 6
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- License: LICENSE
Awesome Lists containing this project
README
# baking-soda
Baking-soda is an interface between
clojurescript's [reagent](https://github.com/reagent-project/reagent)
and [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).
## Usage with [Reactstrap](http://reactstrap.github.io/) (bootstrap 4)
Add the following stylesheet to your *index.html*:
```html
```
Put the following in the `:dependencies` vector of your *project.clj*.
```clojure
[baking-soda "0.2.0"]
[reagent "0.8.1" :exclusions [cljsjs/react
cljsjs/react-dom]]
[cljsjs/react "16.3.2-0"]
[cljsjs/react-dom "16.3.2-0"]
[cljsjs/react-transition-group "2.3.1-0"]
[cljsjs/react-popper "0.10.4-0"]
```
*Note: you need to use reagent 0.8+*
Then require baking-soda in your namespace.
```clojure
(ns foo.bar
(:require [baking-soda.core :as b]))
```
### Example
Let's take a look at a modal. In javascript, you'd write something like this:
```jsx
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
class ModalExample extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
{this.props.buttonLabel}
Modal title
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.
Do Something{' '}
Cancel
);
}
}
export default ModalExample;
```
However, in clojurescript with baking-soda, you'd write something like this:
```clojure
(ns foo.bar
(:require
[reagent.core :as reagent]
[baking-soda.core :as b]))
(defonce app-state
(reagent/atom {:show-modal? false}))
(defn toggle! [ratom]
(swap! ratom update :show-modal? not))
(defn modal-example [ratom opts]
(let [{:keys [button-label
class]} opts
show-modal? (get @ratom :show-modal? false)]
[:div
[b/Button {:color "danger"
:on-click #(toggle! ratom)}
button-label]
[b/Modal {:is-open show-modal?
:toggle #(toggle! ratom)
:class class}
[b/ModalHeader
"Modal title"]
[b/ModalBody
"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."]
[b/ModalFooter
[b/Button {:color "primary"
:on-click #(toggle! ratom)}
"Do Something"]
[b/Button {:color "secondary"
:on-click #(toggle! ratom)}
"Cancel"]]
]
]))
(defn ^:export main []
(reagent/render [modal-example app-state {:button-label "Click Me"
:class "mymodal"}]
(.getElementById js/document "app")))
```
## Usage with [React-bootstrap](https://react-bootstrap.github.io/) (bootstrap 3)
Add the following stylesheet to your *index.html*:
```html
```
Put the following in the `:dependencies` vector of your *project.clj*
```clojure
[baking-soda "0.2.0"]
[reagent "0.7.0"]
```
*Note: you need to use reagent 0.7*
Then require baking-soda in your namespace.
```clojure
(ns foo.bar
(:require [baking-soda.bootstrap3 :as b3]))
```
### Example
Let's take a look at a modal. In javascript, you'd write something like this:
```jsx
const Example = React.createClass({
getInitialState() {
return { showModal: false };
},
close() {
this.setState({ showModal: false });
},
open() {
this.setState({ showModal: true });
},
render() {
return (
Click to get the full Modal experience!
Launch demo modal
Modal heading
Text in a modal
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Close
);
}
});
ReactDOM.render(, mountNode);
```
However, in clojurescript with baking-soda, you'd write something like this:
```clojure
(ns foo.bar
(:require
[reagent.core :as reagent]
[baking-soda.bootstrap3 :as b3]))
(defonce app-state
(reagent/atom {:show-modal? false}))
(defn modal-open! [ratom]
(swap! ratom assoc :show-modal? true))
(defn modal-close! [ratom]
(swap! ratom assoc :show-modal? false))
(defn modal-example [ratom]
(let [show-modal? (get @ratom :show-modal? false)]
[:div
[:p "Click to get the full Modal experience!"]
[b3/Button {:bs-style "primary"
:bs-size "large"
:on-click #(modal-open! ratom)}
"Launch demo modal"]
[b3/Modal {:show show-modal?
:on-hide #(modal-close! ratom)}
[b3/ModalHeader {:close-button true}
[b3/ModalTitle
"Modal Heading"]]
[b3/ModalBody
[:h4 "text in a modal"]
[:p "Duis mollis, est non commodo luctus, nisi erat porttitor ligula."]]
[b3/ModalFooter
[b3/Button {:on-click #(modal-close! ratom)}
"Close"]]
]]))
(defn ^:export main []
(reagent/render [modal-example app-state]
(.getElementById js/document "app")))
```
## Questions
If you have questions, I can usually be found hanging out in the
[clojurians](http://clojurians.net/) #reagent slack channel (my handle
is [@gadfly361](https://twitter.com/gadfly361)).
# License
Copyright © 2017 Matthew Jaoudi
Distributed under the The MIT License (MIT).