https://github.com/yomguithereal/baobab-deku

Simple helpers to use Baobab along with deku
https://github.com/yomguithereal/baobab-deku

Last synced: 5 days ago
JSON representation

Simple helpers to use Baobab along with deku

• Host: GitHub
• URL: https://github.com/yomguithereal/baobab-deku
• Owner: Yomguithereal
• License: mit
• Created: 2016-01-04T17:02:57.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-06T09:47:28.000Z (almost 9 years ago)
• Last Synced: 2024-10-12T01:42:40.695Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 6.84 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# baobab-deku

Simple helpers to use Baobab along with deku.

## Installation

You can install **baobab-deku** easily through npm (note that you must have `baobab` and `deku` installed for the library to work):

```

# Installing necessary dependencies

npm install --save baobab deku

# Installing the lib

npm install --save baobab-deku

```

## Usage

```jsx

import Baobab from 'baobab';

import {dom, element} from 'deku';

import {createDispatcher, branch} from 'baobab-deku';

const {createRenderer} = dom;

// 1. Creating our tree

const tree = new Baobab({counter: 0});

// 2. Creating actions to mutate the counter

function increment(tree, by = 1) {

  tree.apply('counter', nb => nb + by);

}

function decrement(tree, by = 1) {

  tree.apply('counter', nb => nb - by);

}

// 3. Creating our dispatcher & renderer

const dispatcher = createDispatcher(tree),

      render = createRenderer(document.body, dispatcher);

// 4. Creating a counter component

const Counter = branch({counter: ['counter']}, ({dispatch, props}) => {

  return (

    


      
{props.counter}

      


        -

        +

      

      


        -10

        +10

      

    

  );

});


// 5. Rendering our app, pass the tree as context & refreshing on tree update

function refresh() {

  render(, {tree});

}

tree.on('update', refresh);

refresh();

```

## License

[MIT](LICENSE.txt)