https://github.com/dotboris/tie
A set of data-bound from controls for reagent
https://github.com/dotboris/tie
Last synced: 8 months ago
JSON representation
A set of data-bound from controls for reagent
- Host: GitHub
- URL: https://github.com/dotboris/tie
- Owner: dotboris
- License: mit
- Archived: true
- Created: 2016-08-27T01:36:03.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-09-05T07:17:51.000Z (almost 10 years ago)
- Last Synced: 2025-10-17T22:57:00.574Z (9 months ago)
- Language: Clojure
- Size: 30.3 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
tie
===
[](https://travis-ci.org/dotboris/tie)
[](https://clojars.org/dotboris/tie)
A ClojureScript library that provides data-bound form controls for reagent.
Why
---
Building forms in reagent is pretty tedious. For every control, you need to
define `:value` / `:checked` and `:on-change`. These are always implemented the
same way. They read from an atom and write back to it. Tie solves this by
letting you just pass in the atom and the data binding is automatic.
Usage
-----
Let's start with a quick example:
```clojure
(ns my.core
(:require [tie.core :as t] ; require tie
[reagent.core :as r]))
(defonce state (r/atom {}))
(defn my-component [state]
[:form
[:label "What is your name?"
; use control components
[t/text {:atom (r/cursor state [:name])}]]
[:label "Tell me a story."
; use more control components
[t/textarea {:atom (r/cursor state [:story])}]]
[:button {:type "submit"}]])
(r/render [my-component state]
(.getElementById js/document "app"))
```
### Components
You create components using the square bracket notation. They take a map of
properties as their first argument. Data binding is done with the `:atom`
property. Extra properties will be passed to the underlying control. The exact
property will vary from one component to the next.
Here is a simple example with a textbox:
```clojure
[t/text {:atom some-atom :class "fancy-textbox"}]
```
This creates a textbox that is data-bound to the `some-atom` atom and that has
the `fancy-textbox` class.
For documentation on specific components, you can look at the documentation of
the docstrings on the component functions.
Development
-----------
### Setup
Install node dependencies
```sh
npm install
```
### Running tests
```sh
# once
lein test once
# auto / watched
lein test auto
```